542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says

Hi guys!

I’m creating a content slider, and it works as expected, however I don’t know how to make it automatic. I want it to start working when the page is loaded.

You can see the code here:

$(document).ready(function(){

    // Image Variables
    var slide0 = $('#slide_0'),
        slide1 = $('#slide_1').hide(),
        slide2 = $('#slide_2').hide(),
        slide3 = $('#slide_3').hide(),
        slide4 = $('#slide_4').hide(),
        slide5 = $('#slide_5').hide();
        slide6 = $('#slide_6').hide();

    // Thumb Variables
    var thumb0 = $('#thumb_0'),
        thumb1 = $('#thumb_1'),
        thumb2 = $('#thumb_2'),
        thumb3 = $('#thumb_3'),
        thumb4 = $('#thumb_4'),
        thumb5 = $('#thumb_5');
        thumb6 = $('#thumb_6');

    // Text Variables
    var text0 = $('#text_0'),
        text1 = $('#text_1').hide(),
        text2 = $('#text_2').hide(),
        text3 = $('#text_3').hide(),
        text4 = $('#text_4').hide(),
        text5 = $('#text_5').hide();
        text6 = $('#text_6').hide();

    // When thumb 0 is clicked
    thumb0.click(function(e) {
        slide0.fadeIn(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.fadeIn(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_select"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 1 is clicked
    thumb1.click(function(e) {
        slide0.hide(),
        slide1.fadeIn(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.fadeIn(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_select"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 2 is clicked
    thumb2.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.fadeIn(),
        slide3.hide(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.fadeIn(),
        text3.hide(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_select"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 3 is clicked
    thumb3.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.fadeIn(),
        slide4.hide(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.fadeIn(),
        text4.hide(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_select"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 4 is clicked
    thumb4.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.fadeIn(),
        slide5.hide(),
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.fadeIn(),
        text5.hide();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_select"),
        thumb5.toggleClass("slider_thumb_unlect"),
    e.preventDefault();
    });

    // When thumb 5 is clicked
    thumb5.click(function(e) {
        slide0.hide(),
        slide1.hide(),
        slide2.hide(),
        slide3.hide(),
        slide4.hide(),
        slide5.fadeIn();
        text0.hide(),
        text1.hide(),
        text2.hide(),
        text3.hide(),
        text4.hide(),
        text5.fadeIn();
        thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
        thumb0.toggleClass("slider_thumb_unlect"),
        thumb1.toggleClass("slider_thumb_unlect"),
        thumb2.toggleClass("slider_thumb_unlect"),
        thumb3.toggleClass("slider_thumb_unlect"),
        thumb4.toggleClass("slider_thumb_unlect"),
        thumb5.toggleClass("slider_thumb_select"),
    e.preventDefault();
    });

    // When the page is loaded set first thumb as selected
    thumb0.toggleClass("slider_thumb_select");

    // AUTO SLIDER

    // If Thumb 0 is Selected
    if(thumb0.hasClass("slider_thumb_select")) {
        function autoslide0() {
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
        }
        $("autoslide0").delay(800);
    };

    // If Thumb 1 is Selected
    if(thumb1.hasClass("slider_thumb_select")) {
        function autoslide1() {
            slide1.hide(),
            slide2.fadeIn(),
            text1.hide(),
            text2.fadeIn(),
            thumb1.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb1.toggleClass("slider_thumb_unlect"),
            thumb2.toggleClass("slider_thumb_select");
        }
        $("autoslide1").delay(800);
    };

    // If Thumb 2 is Selected
    if(thumb2.hasClass("slider_thumb_select")) {
        function autoslide2() {
            slide2.hide(),
            slide3.fadeIn(),
            text2.hide(),
            text3.fadeIn(),
            thumb2.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb2.toggleClass("slider_thumb_unlect"),
            thumb3.toggleClass("slider_thumb_select");
        }
        $("autoslide2").delay(800);
    };

    // If Thumb 3 is Selected
    if(thumb3.hasClass("slider_thumb_select")) {
        function autoslide3() {
            slide3.hide(),
            slide4.fadeIn(),
            text3.hide(),
            text4.fadeIn(),
            thumb3.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb3.toggleClass("slider_thumb_unlect"),
            thumb4.toggleClass("slider_thumb_select");
        }
        $("autoslide3").delay(800);
    };

    // If Thumb 4 is Selected
    if(thumb4.hasClass("slider_thumb_select")) {
        function autoslide4() {
            slide4.hide(),
            slide5.fadeIn(),
            text4.hide(),
            text5.fadeIn(),
            thumb4.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb4.toggleClass("slider_thumb_unlect"),
            thumb5.toggleClass("slider_thumb_select");
        }
        $("autoslide4").delay(800);
    };

    // If Thumb 5 is Selected
    if(thumb5.hasClass("slider_thumb_select")) {
        function autoslide5() {
            slide5.hide(),
            slide6.fadeIn(),
            text5.hide(),
            text6.fadeIn(),
            thumb5.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb5.toggleClass("slider_thumb_unlect"),
            thumb6.toggleClass("slider_thumb_select");
        }
        $("autoslide5").delay(800);
    };

    // If Thumb 6 is Selected
    if(thumb6.hasClass("slider_thumb_select")) {
        function autoslide6() {
            slide6.hide(),
            slide0.fadeIn(),
            text6.hide(),
            text0.fadeIn(),
            thumb6.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb6.toggleClass("slider_thumb_unlect"),
            thumb0.toggleClass("slider_thumb_select");
        }
        $("autoslide6").delay(800);
    };

});

The slider works greatly, however I don’t know how to make it automatic. At the moment I’m trying to use the .delay jQuery function, with no success. I’ve already tried the setTimeOut and SetInterval functions, with no success either.

The problem is that all these functions start counting the time when the page is loaded and not when the thumbs are selected (.hasClass function).

Someone know how to do this? :D Please let me know if you need to see the structure code (html) ;)

1601 posts Building the Web.
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Has been a member for 4-5 years
+2 more
ZoomIt says

That’s not really the way to create a slider. What if there are more then 6 images ? Look at other sliders ( ie nivo ) and analyze their code.

542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says
ZoomIt said
That’s not really the way to create a slider. What if there are more then 6 images ? Look at other sliders ( ie nivo ) and analyze their code.

This slider is a bit different from others, thats why I’m using this method. I’ve already used the nivo slider method, with no success.

I just want to know if I can delay the time when the functions are executed ;)

1734 posts
  • Exclusive Author
  • Won a Competition
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
VisualSharing says

Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says
cmt said
Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

Thank you very much :)

This means that I can use something like this to change the slides that are being shown?

    thumb0.bind("load", function(){
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
    });
542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says
ThemesFever said
cmt said
Just put the function inside a window.load function – it will wait for all the images to load, unlike jQuery(document).ready(), which waits only for the DOM to load. That’s the simplest way.

Or, if you choose jQuery, a more dedicated solution would be to do something like:

$("#slider img").bind("load", function(){
    // Do something when are images are loaded
});

Also have a look at pogoking’s thread: Wanted: jQuery image loader – I think you’ll find it very helpful.

Have a great day,
Boris

Thank you very much :)

This means that I can use something like this to change the slides that are being shown?

    thumb0.bind("load", function(){
            slide0.hide(),
            slide1.fadeIn(),
            text0.hide(),
            text1.fadeIn(),
            thumb0.removeClass("slider_thumb_unlect slider_thumb_select"),
            thumb0.toggleClass("slider_thumb_unlect"),
            thumb1.toggleClass("slider_thumb_select");
    });

It didn’t worked, I will try something else :)

1734 posts
  • Exclusive Author
  • Won a Competition
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
VisualSharing says

Inside the $(“img”).load thing above insert a setInterval() function that calls another function, changing the slide shown every X miliseconds.

Pseudocode:

1. When the images load
2.     Set interval of 2000 miliseconds
3.         Hide all slides and show the next (if the last one is currently active => next comes the first slide)
3007 posts
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 100 and 199 users
+2 more
duotive says

DO NOT , I REPEAT , DO NOT , USE THAT CODE !! just google for bx slider ;)

542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says

I will try to explain better what I want :P

I want to:

Execute function autoslide1 10000 milliseconds after function autoslide0

Execute function autoslide2 10000 milliseconds after function autoslide1

Execute function autoslide3 10000 milliseconds after function autoslide2

Execute function autoslide3 10000 milliseconds after function autoslide2

Execute function autoslide4 10000 milliseconds after function autoslide3

Execute function autoslide5 10000 milliseconds after function autoslide4

Execute function autoslide5 10000 milliseconds after function autoslide4

;)

Anyone knows how to do this? :S

542 posts
  • Exclusive Author
  • Europe
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 3-4 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
ThemesFever says
duotive said
DO NOT , I REPEAT , DO NOT , USE THAT CODE !! just google for bx slider ;)

Why not? It works properly, the problem is that it isn’t automatic :S

You can see the slider working here: http://www.screenr.com/kuAs

by
by
by
by
by
by