Flash Karussell - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Flash Karussell

Scripte > Bildergallerien


Ein einfaches Flash-Karussell. (UTF-8)

Flash

Hier eine horizontale Bildergallery als Slide Show mit Verlinkung. Beim Klick auf die Beschreibung oder dem Bild öffnet sich ein neues Fenster mit vergrößertem Bild. Dieses Slide basiert auf drei Imagedateien je Aufruf, die entsprechend gestaltet werden können. Somit kann man die Größe der Gallerie selbst bestimmen und weiter ausbauen.
Hier sind 2 Varianten zur Einbindung erläutert. Der Einfachheit halber,  empfiehlt sich die Variante 2 zum Einbau.
In der Zip-Datei befindet sich ein Verzeichnis "
jq_slide-gallery", das so übernommen werden kann. Die Anpassung des Menüs erfolgt dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Nur erfahrene Nutzer sollten Textänderungen an den CSS-Definitionen vornehmen, da viele Funktionen über die Datei "jquery.js" namensgleich gesteuert werden.


Code für den HEAD-Bereich:

<script language="javascript">AC_FL_RunContent = 0;</script>
<script
language="javascript" src="fl_img-karussell/AC_RunActiveContent.js">
</script>



Variante 1


Code für das HTML-Objekt:

<div id="slide">
<div id="slideboundary">
<div class="slidediv slidecurrent">
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_k.jpg" width="500" height="300" class="slideimg" alt="Hund 1" border="0"/></a>
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_v.gif" width="50" height="300" class="slide_v" alt="Hund 1" border="0"/></a>
<a href="jq_slide-gallery/img/hund1_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund1_h.gif" width="500" height="50" class="slide_h" alt="Hund 1" border="0"/></a>
</div>
 
<div class="slidediv">
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_k.jpg" width="500" height="300" class="slideimg" alt="Hund 2" border="0"/></a>
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_v.gif" width="50" height="300" class="slide_v" alt="Hund 2" border="0"/></a>
<a href="jq_slide-gallery/img/hund2_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hund2_h.gif" width="500" height="50" class="slide_h" alt="Hund 2" border="0"/></a>
</div>

<div class="slidediv">
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_k.jpg" width="500" height="300" class="slideimg" alt="B&auml;r" border="0"/></a>
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_v.gif" width="50" height="300" class="slide_v" alt="B&auml;r" border="0"/></a>
<a href="jq_slide-gallery/img/baer_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/baer_h.gif" width="500" height="50" class="slide_h" alt="B&auml;r" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_k.jpg" width="500" height="300" class="slideimg" alt="Hirsch" border="0"/></a>
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_v.gif" width="50" height="300" class="slide_v" alt="Hirsch" border="0"/></a>
<a href="jq_slide-gallery/img/hirsch_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/hirsch_h.gif" width="500" height="50" class="slide_h" alt="Hirsch" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_k.jpg" width="500" height="300" class="slideimg" alt="Papagei" border="0"/></a>
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_v.gif" width="50" height="300" class="slide_v" alt="Papagei" border="0"/></a>
<a href="jq_slide-gallery/img/papagei_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/papagei_h.gif" width="500" height="50" class="slide_h" alt="Papagei" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_k.jpg" width="500" height="300" class="slideimg" alt="Schwan" border="0"/></a>
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_v.gif" width="50" height="300" class="slide_v" alt="Schwan" border="0"/></a>
<a href="jq_slide-gallery/img/schwan_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/schwan_h.gif" width="500" height="50" class="slide_h" alt="Schwan" border="0"/></a>
</div>
    
<div class="slidediv">
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_k.jpg" width="500" height="300" class="slideimg" alt="Pferd" border="0"/></a>
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_v.gif" width="50" height="300" class="slide_v" alt="Pferd" border="0"/></a>
<a href="jq_slide-gallery/img/pferd_g.jpg" target="_blank">
 <img src="jq_slide-gallery/img/pferd_h.gif" width="500" height="50" class="slide_h" alt="Pferd" border="0"/></a>
</div>
 </div>
</div>



Variante 2

Code für das HTML-Objekt:


<? include "fl_img-karussell/index.html"; ?>


Code der CSS-Datei (slide_style.css):


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

#slide
{
width: 100px;
height: 300px;
background-color: #A3A5A2;
}

#slideboundary
{
width: 950px;
height: 300px;
overflow: hidden;
position: relative;
}

#slideboundary .slidediv
{
display: block;
position: absolute;
width: 500px;
height: 300px;
top: 0;
left: 0;
background-color: #A3A5A2;
border-left: 2px solid #ffffff;
border-top: none;
border-bottom: none;
border-right: none;
}

#slideboundary .slide_v
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 300px;
margin: 0;
padding: 0;
}

#slideboundary .slide_h
{
display: block;
position: absolute;
top: 250px;
left: 0;
width: 500px;
height: 50px;
margin: 0;
padding: 0;
}

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 19 Online
 » 86 Heute
 » 1045 Woche
 » 4800 Monat
 » 30624 Jahr
 » 277202 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü