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>
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>