bumble
Neues Mitglied
Hallo liebes Forum,
ich wende mich an euch mit einer Frage, die mich zum Verzweifeln bringt.
Es geht um dieses Script: JQuery Photo Slider with Semi Transparent Caption
Das habe ich bei mir versucht einzubauen (siehe ramion punkt de).
Das Problem: der Slider wiederholt das erste Bild 2x, bevor er zu den anderen 3 übergeht! Obwohl es im HTML nur 1x hinterlegt ist. Das erste Bild wird 2x angezeigt. Beim ersten Mal davon übernimmt er Title Tag und Link des letzten Eintrags aus der Liste der Bilder (aber das erste Bild ?!), beim zweiten Anzeigen nimmt er den richtigen Title Tag und Link aus dem ersten Eintrag und auch das richtige Bild (das Bild mit "Neues erschaffen).
Ich bin am Verzweifeln. Ehrlich. Ich sitze schon den ganzen Vormittag dran :(
HTML-Code:
CSS Code:
Javascript:
Vielen Dank im Voraus für die Hilfe!
Freundliche Grüße
ich wende mich an euch mit einer Frage, die mich zum Verzweifeln bringt.
Es geht um dieses Script: JQuery Photo Slider with Semi Transparent Caption
Das habe ich bei mir versucht einzubauen (siehe ramion punkt de).
Das Problem: der Slider wiederholt das erste Bild 2x, bevor er zu den anderen 3 übergeht! Obwohl es im HTML nur 1x hinterlegt ist. Das erste Bild wird 2x angezeigt. Beim ersten Mal davon übernimmt er Title Tag und Link des letzten Eintrags aus der Liste der Bilder (aber das erste Bild ?!), beim zweiten Anzeigen nimmt er den richtigen Title Tag und Link aus dem ersten Eintrag und auch das richtige Bild (das Bild mit "Neues erschaffen).
Ich bin am Verzweifeln. Ehrlich. Ich sitze schon den ganzen Vormittag dran :(
HTML-Code:
HTML:
<div id="gallery">
<a href="projekte.html">
<img src="http://www.html.de/images/slider-ideen-realisieren.png" alt="Ideen realisieren" width="600" height="360" title="Ideen und Projekte umsetzen" rel="<h3>Ideen realisieren</h3>Unsere ganze Welt ist auf Ideen gebaut. Unser Ziel ist es, Zukunftstrends zu erkennen und diese möglichst früh umzusetzen, indem wir anhand neuer Ideen innovative Konzepte erschaffen, die den Anforderungen und Bedürfnissen unserer modernen Gesellschaft gerecht werden."/>
</a>
<a href="/domains">
<img src="http://www.html.de/images/slider-domains.png" alt="Domainverkauf" width="600" height="360" title="Unsere Domains für Ihren Erfolg" rel="<h3>Domains</h3>Wir bieten Ihnen und Ihren Kunden bei vergleichensweise guten Domainpreisen sorgfältig nach den aktuellen Trends ausgesuchte Domains. Als Ihr zuverlässiger Domainpartner haben wir bereits vielen Kunden dabei geholfen, die richtige Domain zu finden."/>
</a>
<a href="/webdesign">
<img src="http://www.html.de/images/slider-webdesign.png" alt="Webdesign aus Stuttgart" width="600" height="360" title="Professionelles Webdesign aus Stuttgart" rel="<h3>Webdesign</h3>Wir erstellen Ihre Website ganz nach Ihren Wünschen und Kundenerwartungen. Von uns erstellte Websites sind suchmaschinenoptimiert, benutzerfreundlich und haben ein individuelles und professionelles Webdesign."/>
</a>
<a href="werbung.html">
<img src="http://www.html.de/images/slider-werbung.png" alt="Ihre Werbung im Internet" width="600" height="360" title="Mit uns gezielt werben" rel="<h3>Ihre Werbung im Internet</h3>Wir betreiben themenspezifische Internetportale, die durch hohe Besucherzahlen Ihnen die Möglichkeit geben, direkt Ihre Zielgruppe anzusprechen. Durch die Übersichtlichkeit unserer Seiten fällt Ihre Anzeige sofort ins Auge, was hohe Klickraten garantiert. "/>
</a>
<div class="caption"><div class="slidertext"></div></div>
</div>
<div class="clear"></div>CSS Code:
HTML:
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:400
}
#gallery .caption {
z-index:401;
background-color:#000;
color:#ffffff;
height:110px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .slidertext {
margin:10px
}
#gallery .caption .slidertext h3 {
margin:0;
padding:0;
color:#1DCCEF;
}Javascript:
Code:
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .slidertext').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',10000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1500);
//Hide the current image
current.animate({opacity: 0.0}, 1500)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},110 ).animate({height: '110px'},1000 );
//Display the content
$('#gallery .slidertext').html(caption);
}Vielen Dank im Voraus für die Hilfe!
Freundliche Grüße
