Solved

JavaScript help with Image Rotator functionality

Posted on 2013-06-16
12
407 Views
Last Modified: 2013-06-17
I have a website that switches between English and French via a cookie. I have all the content working correctly, but can't seem to figure out this image rotator section. When the cookie is set to "English" it works just fine. But when I set the cookie to French, the images just appear one after the other....not in the rotator box.

I am trying to use the DIV tag to set the images....you can see <div class="frenchContent">

any thoughts?

<style type="text/css">
#slideShowHome img.active {
    z-index:10;
    opacity:1.0;
}

#slideShowHome img.last-active {
    z-index:9;
}
#showpicpager{height: 25px; margin-top: -28px; z-index: 19; position: 
relative;margin-right:10px; text-align:right}
#showpicpager span{cursor:pointer;font-weight:bold;margin-left:4px; padding:3px 4px;border:solid 1px 
white;color:white;zoom:100%}
#showpicpager span.active{background-color:#E1CB91}</style>

<div id="midContainer">
	<div style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
		<div id="slideShowHome" style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
			<div class="englishContent">
				<a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/slidepic1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 
<a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/slidepic2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> 
<a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage3" src="../images/slideshowhome/slidepic3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a></div>
			<div class="frenchContent">
				<a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/french/french1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 
<a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> 
<a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a></div>
		</div>
	</div>
	<div id="showpicpager">
		<span class="active" id="slidePage1" onclick="slideSwitch('1')">1</span> <span id="slidePage2" onclick="slideSwitch('2')">2</span> <span id="slidePage3" onclick="slideSwitch('3')">3</span></div>
	
<script type="text/javascript">
    var intervalcon;
    function slideSwitch(nextpicinumber) {
        var nextpic = $("#slideImage" + nextpicinumber);
        var spanpager = $("#slidePage" + nextpicinumber);
        var $activeImg = $('#slideShowHome img.active');
        var $activeSpan = $('#showpicpager span.active');
        var $nextImg = '';
        var $nextSpan = '';
        if ($activeImg.length == 0) {
            $activeImg = $('#slideShowHome img:last');
            $activeSpan = $('#showpicpager span:last');
        }
        if (nextpicinumber == undefined) {
            $nextImg = $activeImg.parent().next().children().length > 0 ? $activeImg.parent().next().children() : $('#slideShowHome img:first');
            $nextSpan = $activeSpan.next().length ? $activeSpan.next() : $('#showpicpager span:first');
        } else {
            clearInterval(intervalcon);
            $nextImg = nextpic;
            $nextSpan = spanpager;
        }

        $activeImg.addClass('last-active');
        $activeSpan.addClass('last-active');
        $activeSpan.removeClass('active last-active');
        $nextSpan.addClass('active');
        $nextImg.css({ opacity: 0.0 })
			.addClass('active')
			.animate({ opacity: 1.0 }, 2000, function () {
			    $activeImg.removeClass('active last-active');
			    /*$activeImg.parent().hide();
			    $nextImg.parent().show();*/
			});
        if (nextpicinumber != undefined) {
            intervalcon = setInterval("slideSwitch()", 7000);
        }
    }

    $(function () {
        intervalcon = setInterval("slideSwitch()", 5000);
    });
</script>

Open in new window

0
Comment
Question by:DCFC
  • 4
  • 4
  • 2
  • +1
12 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Try this. Seems more appropriate.

Please note I removed the inline handlers and moved the content outside and hid it. I also added a missing </div> and fixed the interval function so it uses a better invocation.
I assume you have the cookie plugin available and have a cookie called lang which can be french or not.

I gave the pages a class but you could change

 $(".pager").on("click",function(){

to

 $("#showpicpager a").on("click",function(){

instead

Also note that you have 5000 vs 7000 in the interval

<script type="text/javascript">
    var intervalcon;
    function slideSwitch(nextpicinumber) {
        var nextpic = $("#slideImage" + nextpicinumber);
        var spanpager = $("#slidePage" + nextpicinumber);
        var $activeImg = $('#slideShowHome img.active');
        var $activeSpan = $('#showpicpager span.active');
        var $nextImg = '';
        var $nextSpan = '';
        if ($activeImg.length == 0) {
            $activeImg = $('#slideShowHome img:last');
            $activeSpan = $('#showpicpager span:last');
        }
        if (nextpicinumber == undefined) {
            $nextImg = $activeImg.parent().next().children().length > 0 ? $activeImg.parent().next().children() : $('#slideShowHome img:first');
            $nextSpan = $activeSpan.next().length ? $activeSpan.next() : $('#showpicpager span:first');
        } else {
            clearInterval(intervalcon);
            $nextImg = nextpic;
            $nextSpan = spanpager;
        }

        $activeImg.addClass('last-active');
        $activeSpan.addClass('last-active');
        $activeSpan.removeClass('active last-active');
        $nextSpan.addClass('active');
        $nextImg.css({ opacity: 0.0 })
            .addClass('active')
            .animate({ opacity: 1.0 }, 2000, function () {
                $activeImg.removeClass('active last-active');
                /*$activeImg.parent().hide();
                $nextImg.parent().show();*/
            });
        if (nextpicinumber != undefined) {
            intervalcon = setInterval(function() { slideSwitch() } , 7000);
        }
    }

    $(function () {
        $(".pager").on("click",function(){
          slideSwitch(this.id.replace("slidePage",""));
        });

        var $clone = $.cookie("lang")=="french"?$(".frenchContent").clone():$(".englishContent").clone();
        $("#slideShowHome").html($clone);
        intervalcon = setInterval(function() { slideSwitch()}, 5000);
    });
</script>

<style type="text/css">
#slideShowHome img.active {
    z-index:10;
    opacity:1.0;
}

#slideShowHome img.last-active {
    z-index:9;
}
#showpicpager{height: 25px; margin-top: -28px; z-index: 19; position: 
relative;margin-right:10px; text-align:right}
#showpicpager span{cursor:pointer;font-weight:bold;margin-left:4px; padding:3px 4px;border:solid 1px 
white;color:white;zoom:100%}
#showpicpager span.active{background-color:#E1CB91}</style>

<div id="midContainer">
	<div style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
		<div id="slideShowHome" style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
		</div>
	</div>
	<div id="showpicpager">
		<span class="active pager" id="slidePage1">1</span> <span class="pager" id="slidePage2">2</span> <span class="pager" id="slidePage3">3</span>
    </div>
	
</div>
<div class="englishContent" display="none">
  <a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/slidepic1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 
  <a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/slidepic2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> 
  <a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage3" src="../images/slideshowhome/slidepic3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a>
  </div>
  <div class="frenchContent" display="none">
    <a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/french/french1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 
    <a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> 
    <a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a>
</div>

Open in new window

0
 
LVL 11

Expert Comment

by:Amar Bardoliwala
Comment Utility
Hello  DCFC,

Might be a problem with css selector..

Can you show working page? It might help more to resolve problem.

Between, you can try to swap divs "englishContent" and "frenchContent" to see if it works with french content after swapping [put frenchContent div first and englishContent div second].

Hope this will help you.

Thank you.

Amar Bardoliwala
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Amar, you are likely correct.
The code posted is working - I just bypassed the issue by only have one set of images in the slideshow
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
The biggest problem you have is you are duplicating your id's for your images.

Your id values have to be unique.

What you can do is change your images to include the language

#slideImage_fr_1
#slideImage_en_1
etc
Then change
        var nextpic = $("#slideImage" + nextpicinumber);
To
        var nextpic = $("#slideImage_" +language + '_' + nextpicinumber);

Where language is a variable set to whatever language is active.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
If that is the case then I would do this instead
<div id="slideShowHome">
  <a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage0" src="../images/slideshowhome/defaultForAnyLanguage.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 

  <a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/slidepic1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> 
  <a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/slidepic2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> 
  <a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage3" src="../images/slideshowhome/slidepic3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a>
  </div>

Open in new window

with this script
<script>
var images = {
  "english":[
    "../images/slideshowhome/french/french1.jpg",
    "../images/slideshowhome/french/french2.jpg",
    "../images/slideshowhome/french/french3.jpg"
  ]
  "english":[
    "../images/slideshowhome/slidepic1.jpg",
    "../images/slideshowhome/slidepic2.jpg",
    "../images/slideshowhome/slidepic3.jpg"
  ]
}
$(function() {
  $("#slideImage0").remove(); // loose the default image
  var lang = $.cookie("lang")=="french"?"french":"english";
  var langImages = images[lang];
  $("#slideShowHome a").each(function(i) {
      this.src=langImages[i];
    }
  }
  intervalcon = setInterval(function() { slideSwitch()}, 5000);
}

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Why do the building of the div in JS?

If you know the language at the time you generate the page then simply have a conditional on the div

if (lang == 'en') :
  // output english div
else
  // output french div

Then you can keep the id's the same and have a single JS function that acts on the container div which could have a generic name.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:DCFC
Comment Utility
OK quick update....I think we are very close here.  

Here is the link to the page:  http://www.gerberonline.ca/

Once there you can see on the top right how to change the languages.

The English version works fine, but when I switch to french it only shows the first image and won't change them.

Here is the code I have in that container.

<p>&nbsp;</p>
<style type="text/css">

#slideShowHome{
    position:relative;
    height:350px;
}

#slideShowHome img{
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideShowHome img.active {
    z-index:10;
    opacity:1.0;
}

#slideShowHome img.last-active {
    z-index:9;
}
#showpicpager{height: 25px; margin-top: -28px; z-index: 19; position: 
relative;margin-right:10px; text-align:right}
#showpicpager span{cursor:pointer;font-weight:bold;margin-left:4px; padding:3px 4px;border:solid 1px 
white;color:white;zoom:100%}
#showpicpager span.active{background-color:#E1CB91}</style>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<div id="midContainer">
	<div style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
		<div id="slideShowHome" style="background-color: rgb(255, 255, 255); height: 350px; text-align: left; width: 545px;">
			<div class="englishContent">
				<a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/slidepic1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> <a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/slidepic2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> <a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage3" src="../images/slideshowhome/slidepic3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a></div>
			<div class="frenchContent">
				<a href="category.aspx?catid=22&amp;ht=1" target="_blank"> <img alt=" " class="active" id="slideImage1" src="../images/slideshowhome/french/french1.jpg" style="height: 350px; text-align: left; width: 545px;" /> </a> <a href="http://gerber-conservation.com" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french2.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a> <a href="category.aspx?catid=171" target="_blank"> <img alt=" " id="slideImage2" src="../images/slideshowhome/french/french3.jpg" style="background-color: rgb(255, 255, 255); height: 350px; width: 545px;" /> </a></div>
		</div>
	</div>
	<div id="showpicpager">
		<span class="active" id="slidePage1" onclick="slideSwitch('1')">1</span> <span id="slidePage2" onclick="slideSwitch('2')">2</span> <span id="slidePage3" onclick="slideSwitch('3')">3</span></div>
	<div class="englishContent">
		<div style="width: 100%; float: left; height: 100px;">
			<div class="floatLeft ">
				<a href="http://gerberplumbing.myshowerhead.com/" target="_blank"> <img src="../images/ad_video.jpg" /> </a></div>
			<div class="floatRight">
				<a href="http://www.youtube.com/user/GerberPlumbing#p/a/u/1/zL5hZ5tivLw" target="_blank"> <img src="../images/Video_Library.jpg" /> </a></div>
		</div>
	</div>
	<div class="frenchContent">
		<div style="width: 100%; float: left; height: 100px;">
			<div class="floatLeft ">
				<a href="http://www.plumbersadvantageoverstock.ca/Enter.htm" target="_blank"> <img src="../images/Discount_button.jpg" /> </a></div>
			<div class="floatRight">
				<a href="http://www.youtube.com/user/GerberPlumbing#p/a/u/1/zL5hZ5tivLw" target="_blank"> <img src="../images/ad_video.jpg" /> </a></div>
		</div>
	</div>
</div>
<script type="text/javascript">
    var intervalcon;
    function slideSwitch(nextpicinumber) {
        var nextpic = $("#slideImage" + nextpicinumber);
        var spanpager = $("#slidePage" + nextpicinumber);
        var $activeImg = $('#slideShowHome img.active');
        var $activeSpan = $('#showpicpager span.active');
        var $nextImg = '';
        var $nextSpan = '';
        if ($activeImg.length == 0) {
            $activeImg = $('#slideShowHome img:last');
            $activeSpan = $('#showpicpager span:last');
        }
        if (nextpicinumber == undefined) {
            $nextImg = $activeImg.parent().next().children().length > 0 ? $activeImg.parent().next().children() : $('#slideShowHome img:first');
            $nextSpan = $activeSpan.next().length ? $activeSpan.next() : $('#showpicpager span:first');
        } else {
            clearInterval(intervalcon);
            $nextImg = nextpic;
            $nextSpan = spanpager;
        }

        $activeImg.addClass('last-active');
        $activeSpan.addClass('last-active');
        $activeSpan.removeClass('active last-active');
        $nextSpan.addClass('active');
        $nextImg.css({ opacity: 0.0 })
			.addClass('active')
			.animate({ opacity: 1.0 }, 2000, function () {
			    $activeImg.removeClass('active last-active');
			    /*$activeImg.parent().hide();
			    $nextImg.parent().show();*/
			});
        if (nextpicinumber != undefined) {
            intervalcon = setInterval("slideSwitch()", 7000);
        }
    }

    $(function () {
        intervalcon = setInterval("slideSwitch()", 5000);
    });
</script>

Open in new window

0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
Comment Utility
Your problem is here

<div id="showpicpager">
            <span onclick="slideSwitch('1')" id="slidePage1" class="">1</span> <span onclick="slideSwitch('2')" id="slidePage2" class="active">2</span> <span onclick="slideSwitch('3')" id="slidePage3" class="">3</span></div>

you are calling slideSwitch with 1,2 and 3.

Before you had french and english content each with duplicate id's on images - which would not work - now you are operating only on the English slides (1,2,3) because you have changed your french ones to 4,5 and 6

Use my earlier suggestion where your images are

slideImage_en_1, slideImage_en_2 and slideImage_en_3
slideImage_fr_1, slideImage_fr_2, slideImage_fr_3

Then in your slideSwitch function make this small change
var lang = (Get_Cookie('Language')=='English')?'en':'fr';
var nextpic = $("#slideImage_" + lang + '_' + nextpicinumber);

Keep everything else the same.

That should work.
0
 

Author Comment

by:DCFC
Comment Utility
OK I made those changes.

It's working but with one small bug.  

Go to my page and select the site in French.  Watch the images.  It will scroll through all three, but then stop at the 3rd image.  (notice the numbers still move, just not the images now).

Look at the English....that works fine.

Any ideas?
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Ok it seems to go back to operating on the english content again.

I have to go to a meeting so can't debug now - but look at your code to see why it would cycle back to operate on the english block when french cycled through.
0
 
LVL 11

Accepted Solution

by:
Amar Bardoliwala earned 250 total points
Comment Utility
Hello DCFC,

As I said, in my first post it is a problem with selector,

Please change your condition " if (nextpicinumber == undefined) {" in function slideSwitch

as following

 if (nextpicinumber == undefined) {
			if(lang == 'fr')
			{
				$nextImg = $activeImg.parent().next().children().length > 0 ? $activeImg.parent().next().children() : $('#slideShowHome .frenchContent img:first');
            	$nextSpan = $activeSpan.next().length ? $activeSpan.next() : $('#showpicpager span:first');
			}
			else
			{
            	$nextImg = $activeImg.parent().next().children().length > 0 ? $activeImg.parent().next().children() : $('#slideShowHome img:first');
            	$nextSpan = $activeSpan.next().length ? $activeSpan.next() : $('#showpicpager span:first');
			}
        }

Open in new window


It should work fine for you.

Hope this will help you.

Thank you.

Amar Bardoliwala
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Hmm, that was a waste of time...
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now