How can i create a second image instead of filling like words
Kady
I have the code below. I use this to use 1 image and use the "rel" and "title" tags to fill in the words to display with the actual image. This will create a banner-like system that uses text instead of all images. Right now, what I'm trying to do is populate the image with a "rel" tag; however, don't know how to modify this javascript code to do this.
<img title="This is a title that will appear as text above the image" rel="image1" alt="SEO Image 1" src="../images/backdrop2.png">
As you can see, rel is equal to image1...so all it needs to do is use that to make...
<img class="something" src="images/image1.png">
All it does is populate that 1 position with the word in "rel", and it automatically populates the rest of the code.
<script type="text/javascript">
jQuery(function( $ ){
var efx = "fade", // "slide" || "fade"
animationTime = 600,
pauseTime = 4000,
$gal = $("#images_holder"),
$mov = $("#moving_part"),
$sli = $mov.find("> div"),
$btn = $("#prev, #next"),
$dsc = $("#description"),
$wrd = $("#word"),
w = $gal.width(),
n = $sli.length,
c = 0, // Counter // Start index
itv; // Interval
// SETUP (fade or slide?)
$mov.width(w*n);
if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
function populateWord() {
$wrd.text( $sli.eq(c).find("img").attr("rel") );
}
function populateDescription() {
$dsc.text( $sli.eq(c).find("img").attr("title") );
}
function anim() {
c = c<0 ? n-1 : c%n; // loop-back if exceedds
populateDescription();
populateWord();
if (efx==="fade") {
$sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
}else if(efx==="slide") {
$mov.stop().animate({left: -c*w});
}
}
function auto() {
itv = setInterval(function(){
++c;
anim();
}, pauseTime);
}
function pause() {
return clearInterval( itv );
}
$gal.hover(pause, auto);
$btn.on("click", function(){
c = this.id==="next" ? ++c : --c;
anim();
});
populateDescription();
populateWord();
auto();
});
</script>
Vinayakj
function populateWord() {
var src = 'images/'+$sli.eq(c).find("img").attr("rel")+'.png';
$wrd.html('<img class="something" src="'+src+'">');
}