Wenn man also auf ein Bild im Blog klickt, öffnet sich die Lightbox und man kann sich durch alle hochgeladenen Bilder vom Blog durchblicken.
2. Apfel+F oder STRG+F wird die Suchenfunktion gestartet. Dann sucht ihr die Stelle wo der Body (HTML Code) anfängt.
3. Der folgende Code wird dann vor <body> eingefügt:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul {
list-style: none;
}
#gallery ul li {
display: inline;
}
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover {
color: #fff;
}
</style>
<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/> <link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/><script type="text/javascript"> $(function() {$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script> }); </script> }); </script> $(function() { $('a[rel*=lightbox]').lightBox(); }); </script> $(function() {$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>
});
</script>
});
</script>
4. Der nächste Schritt ist der Wichtigste. Hier werden wir jetzt den gerade eingefügten Code etwas ändern, damit er jetzt alle Bilder aus dem Blog berücksichtigt.
Dafür müssen wir diesen Codeabschnitt:
<script type="text/javascript">
mit diesem tauschen:
<script type="text/javascript">
Rot: hiermit wird nun jedes Bild berücksichtig
Okay das wärs auch schon. Es sollte danach funktionieren. Viel Spaß
Dann dir viel Glück beim "nichtvergessen" :)
AntwortenLöschenxx, a-and-a-twins.blogspot.com