Solved

Javascript Carousel not working properly

Posted on 2008-06-18
8
848 Views
Last Modified: 2011-04-14
I'm putting together a page which when a thumbnail is clicked a larger version of the image fades in along with some text to go with it. I've got it working here, http://www.emtrade.arrivalpreview.co.uk/shot-blasting/shot-blasting-portfolio.html.

My problem is, only the first 2 work properly, once you click a different one, the first 2 appear to repeat again, which is really weird!

The main javascript file is home.js, which is as follows.

Many thanks

Chris
function clearOn(){

	var links = document.getElementsByTagName('A');

	for(var i=0; i < links.length; i++){

		if(links[i].className == "onstate"){

			links[i].className = "";

		}

	}

}

window.addEvent("domready", function() {   

    var Carousel = new iCarousel("carousel_content", {

        idPrevious: "carousel_previous",

        idNext: "carousel_next",

        idToggle: "undefined",

        item: {   

            klass: "carousel_item",

            size: 494   

        },   

        animation: {   

			type: 'fade'  

        }

    });   

  

    $("thumb0").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0);clearOn();this.className = 'onstate';});

    $("thumb1").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(1);clearOn();this.className = 'onstate';});   

    $("thumb2").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(2);clearOn();this.className = 'onstate';});   

    $("thumb3").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(3);clearOn();this.className = 'onstate';});   

    $("thumb4").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(4);clearOn();this.className = 'onstate';});   

    $("thumb5").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(5);clearOn();this.className = 'onstate';}); 

}); 
 

window.addEvent("domready", function() {   

    var Carousel1 = new iCarousel("text_slider_gal", {

		idPrevious: "carousel_previous",

		idNext: "carousel_next",

		idToggle: "undefined",

		item: {

			klass: "text_slider_item",

			size: 194

		},

		animation: {

			type: 'fade'

		}

	}); 

  

    $("thumb0").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(0);clearOn();this.className = 'onstate';});

    $("thumb1").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(1);clearOn();this.className = 'onstate';});

    $("thumb2").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(2);clearOn();this.className = 'onstate';});

    $("thumb3").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(3);clearOn();this.className = 'onstate';});

    $("thumb4").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(4);clearOn();this.className = 'onstate';});

    $("thumb5").addEvent("click", function(event){new Event(event).stop();Carousel1.goTo(5);clearOn();this.className = 'onstate';});

});

Open in new window

0
Comment
Question by:djfenom
  • 3
  • 3
8 Comments
 

Author Comment

by:djfenom
ID: 21844130
Anybody?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 21851334
I can tell you the scripts are not changing the right element to visible for some reason.  Because of how both Mootools and iCarousel obfuscate the code and the lack of explanation of especially the iCarousel code I can't easily tell you why.  For some reason it is just showing/hiding the first two items.  If you use a tool to look at the html source made by the page you can see onstate is set in the class of each thumb just as it should but the css for the description and big picture is not changed in the right element.

I have spent a few minutes trying to find a problem in your JS files or html.  I can't and with the other info I have found and testing I have done it seems like it is related or caused by either the iCarousel or Mootools JS files.  I can't tell you how to fix those though.

Do you have another page using iCarousel and more than 2 images?  Does it work?  If you don't have one try to make a basic page to see if you can get it to work with more than 2.  It would help to "prove" where the problem is.

Let me know how this helps or if you have a question.

bol
0
 

Author Comment

by:djfenom
ID: 21853092
Thanks bol, I have used iCarousel before here, www.arrivaldesign.co.uk and didn't have a problem, although that was using a scrolling action rather than a fading one?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 21857262
There was more than two images in that case?  I will assume so.

What if you remove the transition you use in this case or change it to scrolling?  Does that fix it?  It may help to narrow down the cause although it won't be easy to figure out how to correct the iCarousel script.

Personally I would make my own but that is one main reason I don't use frameworks like MooTools.  I am not telling you to avoid it or not use it but just sharing my opinion. :)  What you want to do is not complicated Javascript but with the other parts that use MooTools, etc could be hard to do on its own.  Just my 2 cents in case you are interested.

bol
0
 

Author Comment

by:djfenom
ID: 21863261
Thanks bol, I've managed to get it working now, had to use 14 blank <li class="carousel_item"></li> and 14 blank <div class="text_slider_item"></div> !!

Not ideal, but it's working for the time being!

Very odd!
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 21866948
Your welcome!  I'm glad I could help.  Thanks for the fun question, the grade and the points.

bol
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

910 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

25 Experts available now in Live!

Get 1:1 Help Now