• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Java Script in Html einbetten

A

Allmi02

Neues Mitglied
Hallo,

Ich hab da ein Problem. Ich habe eine Slideshow in JavaScript, und möchte diese in meinen html-code einbetten. Ich habs mit Php versucht, aber das funktioniert überhaupt nicht. Wie mache ich das also am besten. Ich hoffe es kann mir jemand helfen.

Danke im Voraus
 
Hier das Php:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-like Slideshow Gallery | Tutorialzine demo</title>


<link rel="stylesheet" type="text/css" href="demo.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>


<!--[if lte IE 7]>
<style type="text/css">
ul li{
    display:inline;
    /*float:left;*/
}
</style>
<![endif]-->


</head>


<body>


<div id="main">




  <div id="gallery">


    <div id="slides">


    <div class="slide"><a href="http://www.google.com/" target="_bank"><img src="img/sample_slides/pic01.jpg" width="800" height="520"/><a/></div>
    <div class="slide"><a href="http://www.youtube.com/" target= "_bank"><img src="img/sample_slides/pic02.jpg" width="800" height="520"/><a/></div>
    <div class="slide"><a href="http://www.tsv-hartberg-tennis.at/" target="_bank"><img src="img/sample_slides/pic03.jpg" width="800" height="520"/><a/></div>
    <div class="slide"><a href="http://www.ebay.com/" target="_blank">
    <img src="img/sample_slides/pic04.jpg" width="800" height="520"/></a></div>
    </div>


    <div id="menu">


    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/1.jpg" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/2.jpg"/></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/3.jpg"/></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/4.jpg"/></a></li>
    </ul>




    </div>


  </div>


</div>


</body>
</html>
 
Das Java Script:

Code: 
$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */


    var totWidth=0;
    var positions = new Array();


    $('#slides .slide').each(function(i){


        /* Traverse through all the slides and store their accumulative widths in totWidth */


        positions[i]= totWidth;
        totWidth += $(this).width();


        /* The positions array contains each slide's commulutative offset from the left part of the container */


        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }


    });


    $('#slides').width(totWidth);


    /* Change the cotnainer div's width to the exact width of all the slides combined */


    $('#menu ul li a').click(function(e,keepScroll){


            /* On a thumbnail click */


            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');


            var pos = $(this).parent().prevAll('.menuItem').length;


            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
            /* Start the sliding animation */


            e.preventDefault();
            /* Prevent the default action of the link */




            // Stopping the auto-advance if an icon has been clicked:
            if(!keepScroll) clearInterval(itvl);
    });


    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */






    /*****
     *
     *    Enabling auto-advance.
     *
     ****/


    var current=1;
    function autoAdvance()
    {
        if(current==-1) return false;


        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] will be passed as the keepScroll parameter of the click function on line 28
        current++;
    }


    // The number of seconds that the slider will auto-advance in:


    var changeEvery = 4;




    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);


    /* End of customizations */
});
 
und das css

Code: 
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}


body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}


/* Gallery styles */


#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;


	/* CSS3 Rounded Corners */


	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;


	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;


	border:1px solid white;


	background:url(img/panel.jpg) repeat-x bottom center #ffffff;


	/* The width of the gallery */
	width:800px;
	overflow:hidden;
}


#slides{
	/* This is the slide area */
	height:500px;


	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:800px;
	overflow:hidden;
}


.slide{
	float:left;
}


#menu{
	/* This is the container for the thumbnails */
	height:45px;
}


ul{
	margin:0px;
	padding:0px;
}


li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}


li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}


li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}


li.act a{
	cursor:default;
}


.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}


li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}


a img{
	border:none;
}




/* The styles below are only necessary for the demo page */


h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
}


h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	position:absolute;
	right:0;
	text-transform:uppercase;
	top:15px;
}


#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:920px;
	position:relative;
}


a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}


a:hover{
	text-decoration:underline;
}


p{
	padding:10px;
	text-align:center;
}
 
Allmi02 schrieb:
Hier das Php:
Zum Vergrößern anklicken....

Ich kann in diesem Script kein PhP erkennen. Das ist HTML mit ein wenig CSS, kein PHP!

Wozu braucht man PHP um JavaScript in HTML einzubinden? Braucht man nicht.

Ich will dich jetzt garnicht mal nach deinem JavaScript -Script fragen.

Die richtige END-TAG setzung in HTML sieht so aus </TAG> und NICHT <TAG/> !


HTML: 
<div class="slide"><a href="http://www.google.com/"  target="_bank"><img src="img/sample_slides/pic01.jpg" width="800"  height="520"/><a/></div>
    <div class="slide"><a href="http://www.youtube.com/"  target= "_bank"><img src="img/sample_slides/pic02.jpg" width="800"  height="520"/><a/></div>
    <div class="slide"><a  href="http://www.tsv-hartberg-tennis.at/" target="_bank"><img  src="img/sample_slides/pic03.jpg" width="800"  height="520"/><a/></div>
    <div class="slide"><a href="http://www.ebay.com/" target="_blank">
    <img src="img/sample_slides/pic04.jpg" width="800" height="520"/></a></div>
    </div>


Das solltest du schnell ausbessern.

Hinter diesen Vielen Divs sehe ich Keinen Sinn, Ein DivContainer für alle wäre besser.

Und für einen POPUP verwendet man _blank und nicht _bank

Wenn du diese Fehler mal ausgebessert hast, dann bin ich bereit deinen JavaScript Code zu sehen.

Bei dein Html Fehler könnte Dir dies weiter helfen:

The W3C Markup Validation Service


Und nächstes mal Scripte immer mit hilfe von "[PHP*]Script[/PHP]" "[HTML*]Html[/HTML]" einbinden. OHNE DEM *
 
Ok, ich hab das mit dem _bank mal richtiggestellt, das hat zwar nichts geändert aber trotzdem danke.
Ich weiß gar nicht mehr wo ich die Slideshow her habe, aber Anleitung war da keine dabei...

Wenn ich die Slideshow sozusagen offline öffne funktioniert sie ganz normal, aber sobald ich sie hochlade geht garnix mehr. Könnte es sein, dass sich da zwei css files überschneiden und sich gegenseitig behindern?
Das mit dem PHP war übrigens nicht, meine Idee, ich hab da eigentlich gar keine ahnung, hat ein Freund von mir so gemacht, er hat einfach das ganz normale html file auf php umbenannt, und das ganze dan inkludiert, was offline (also mit localhost und xampp) auch super funktioniert hat.
Welche Vorgehensweise wäre also besser um mein Java Script in die Homepage einzubauen?
 
Um JavaScript in HTML einzubetten, sollten die Dateien im Head referenziert werden (auf Pfadangaben achten) und das Script innerhalb des <script> Tags aufgerufen werden. Entweder vor dem schließenden </body> Tag, oder per jQuery mit einem $(document).ready(function(){}).
 
Wir wollen die gesamte slideshow (java script, css, html) auf die eigentliche homepage einbetten. Wir haben das html file auf php umbenannt, und es mit einem include versucht einzufügen. dann sieht das ganze jedoch so aus:
TSV Hartberg
 
Ich sehe da im Firebug schon mal, dass die Bilder nicht geladen werden können. Überprüfe mal die Pfadangaben.
 
Zuletzt bearbeitet:
Daran liegt es glaube ich nicht. Ich habe gerade nur die slideshow hochgeladen, und den rest der website entfernt. Da hat das ganze prima funktioniert....
 
Wir haben jetzt herausgefunden , dass sich die css files nicht überschneiden, indem wir das haupt css gelöscht haben. Danach hat sich nichts verändert...
Das Problem ist jedoch, dass nicht auf die js und die css datei der slideshow zugegriffen wird, und damit nichts funktioniert.

Was können wir da machen?
 
Allmi02 schrieb:
Ich weiß gar nicht mehr wo ich die Slideshow her habe, aber Anleitung war da keine dabei...
Zum Vergrößern anklicken....

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery | Tutorialzine
Hier hast du sie her, Anleitung ist dabei.

Allmi02 schrieb:
Was können wir da machen?
Zum Vergrößern anklicken....
Den ganzen Quellcode wegwerfen, das ist ja nicht auszuhalten ;)

Ein HTML Dokument besteht aus genau einem Header und einem Body. Bitte das ganze nicht doppelt und dreifach. Du kannst nicht einfach das andere Dokument in deinen Div-Container reinkopieren.
 
Zuletzt bearbeitet:
Du solltest lernen wie ein HTML-Dokument aufgebaut sein muss. Es besteht, wie schon gesagt, aus genau einem Doctype, genau einem <head> und genau einem <body>. Wenn Du nun ein Script einbauen willst, bei dem die Vorlage ebenfalls so aufgebaut ist, musst Du diese Vorlage selbst trennen. Einfach 1:1 kopieren und einfügen ist nicht - das geht nicht und führt zu Fehlern. Du musst die Vorlage so trennen, dass die jeweiligen Bereiche in die Bereiche deiner HTML-Datei eingefügt werden. <script> innerhalb deines <head>, <link> ebenso, und was in der Vorlage zwischen <body> und </body> steht bei dir zwischen <body> und </body>. So erreichst Du dann auch eine nach HTML valide Datei die auch problemlos angezeigt werden kann.

Aktuell bindest Du eine HTML-Datei per <object> ein - das ist ein kein guter Style und kann in manchen Browsern zu Fehlern führen. Und Du hast auch noch ein Zeichensatz-Problem:
Markup Validation of http://tsv-hartberg-tennis.at/ - W3C Markup Validator
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben