DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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) ;)

1625 posts Building the Web.
    Has referred 50+ members Has sold $250,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 50+ items on Envato Market
+7 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.

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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
    Has referred 1+ members Has sold $5,000+ on Envato Market Has collected 1+ items on Envato Market Sells items exclusively on Envato Market
+2 more
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

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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");
    });
DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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
    Has referred 1+ members Has sold $5,000+ on Envato Market Has collected 1+ items on Envato Market Sells items exclusively on Envato Market
+2 more
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
    Has been part of the Envato Community for over 4 years Has referred 200+ members Has sold $250,000+ on Envato Market Had an item featured in an Envato Bundle
+7 more
duotive says

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

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
544 posts
    Located in Portugal Contributed a blog post Helped several times protecting Envato Market against copyright violations Has sold $5,000+ on Envato Market
+4 more
DiogoRedinDevelopment 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