...

View Full Version : JS Slideshow Problem: Need to show more images



JMal
01-02-2012, 04:47 PM
PLEASE! I NEED HELP!
I inherited this problem:mad: from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem.
Here is the Slideshow.js code


var $$ = $.fn;

$$.extend({
SplitID : function()
{
return this.attr('id').split('-').pop();
},

Slideshow : {
Ready : function()
{
$('div.tmpSlideshowControl')
.hover(
function() {
$(this).addClass('tmpSlideshowControlOn');
},
function() {
$(this).removeClass('tmpSlideshowControlOn');
}
)
.click(
function() {
$$.Slideshow.Interrupted = true;

$('div.tmpSlide').hide();
$('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

$('div#tmpSlide-' + $(this).SplitID()).show()
$(this).addClass('tmpSlideshowControlActive');
}
);

this.Counter = 1;
this.Interrupted = false;

this.Transition();
},

Transition : function()
{
if (this.Interrupted) {
return;
}

this.Last = this.Counter - 1;

if (this.Last < 1) {
this.Last = 3;
}

$('div#tmpSlide-' + this.Last).fadeOut(
'slow',
function() {
$('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
$('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
$('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

$$.Slideshow.Counter++;

if ($$.Slideshow.Counter > 3) {
$$.Slideshow.Counter = 1;
}

setTimeout('$$.Slideshow.Transition();', 4000);
}
);
}
}
});

$(document).ready(
function() {
$$.Slideshow.Ready();
}
);


The html code for the pages looks like this:


<div id='tmpSlideshow'>
<div id='tmpSlide-1' class='tmpSlide'>
<div class="banner1">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-2' class='tmpSlide'>
<div class="banner2">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-3' class='tmpSlide'>
<div class="banner3">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id='tmpSlide-4' class='tmpSlide'>
<div class="banner4">
<div class="banner">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Newborn Care</li>
<li>Children</li>
<li>Teenagers</li>
<li>Young Adults</li>
<li>Seniors</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
</div>
</div>
<div id='tmpSlide-5' class='tmpSlide'>
<div class="banner5">
<div class="clear">
<div class="banner_inner">
<div class="clear">
<p>Care for the whole family</p>
</div>
<div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
<div class="clear">
<ul>
<li>Weight Loss</li>
<li>Fit for Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Old Pedant
01-02-2012, 08:50 PM
if (this.Last < 1) {
this.Last = 3;
}


You aren't showing all the code. In particular, you aren't showing where the list of image URLs is. But I *believe* that all you need to do is change that 3 in the above code to the number of images you actually have.

If that doesn't work, the best thing to do would be to give us a link to your live page, so we can see all the code, not just what you chose to share.

Also, this isn't really a JavaScript question as much as it is a jQuery question. You might get better help by posting in the jQuery forum.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum