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

humm, ok

I will try it, thank you :)

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

because that is not proper code and it might get your theme rejected!

2213 posts
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Germany
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+4 more
crozer says

Dude.. that code will kill your site. You are creating and defining objects that should stay completely dynamic. This will hit the DOM hard. Furthermore, you are limiting the slider to the given amount of variables/slides and their respective thumbnails.

Don’t use it as it is.

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
ThemesFever said
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
because that is not proper code and it might get your theme rejected!
crozer said
Dude.. that code will kill your site. You are creating and defining objects that should stay completely dynamic. This will hit the DOM hard. Furthermore, you are limiting the slider to the given amount of variables/slides and their respective thumbnails.

Don’t use it as it is.

Ok then.

So, what is the correct way to make the slider? The slider won’t have more then 6 slides, though.

It would be great if you could give me some code examples :)

EDIT

For reference this is code I’m using to make the slider:

        // Starts Slider Area
        echo '<div id="slider_area">';
            echo '<div id="slider">';

                echo '<div id="slider_bg"></div>';

                // Starts Slider Left
                echo '<div class="slider_left">';

                    $slider = array( 'posts_per_page' => '6' ); // Query definitions
                    query_posts( $slider ); // Query Posts
                        while ( have_posts() ) : the_post();

                        // Variable for the Content
                        $key_images[] = ''.get_the_content().'';

                        echo '<div class="slider_images" id="slide_';
                            echo count($key_images)-1;
                        echo '">';
                            echo '<div class="focus"><img src="';
                                echo get_template_directory_uri(); 
                                echo '/scripts/timthumb.php?src=';
                                echo get_the_post_thumbnail_url();
                            echo '&amp;h=203&amp;w=446&amp;zc=1" alt="" /></div>';
                        echo '</div>';

                        endwhile;
                    wp_reset_query(); //Reset our Query

                    // Starts the Post Thumbs
                    echo '<div class="slider_thumbs">';

                        $slider = array( 'posts_per_page' => '6' ); // Query definitions
                        query_posts( $slider ); // Query Posts
                            while ( have_posts() ) : the_post();

                            // Variable for the Content
                            $key_thumbs[] = ''.get_the_content().'';

                            echo '<div class="slider_thumb" id="thumb_';
                                echo count($key_thumbs)-1;
                            echo '">';
                                echo '<div class="focus"><a href=""><img src="';
                                    echo get_template_directory_uri(); 
                                    echo '/scripts/timthumb.php?src=';
                                    echo get_the_post_thumbnail_url();
                                echo '&amp;h=55&amp;w=55&amp;zc=1" alt="" /></a></div>';
                            echo '</div>';

                            endwhile;
                        wp_reset_query();

                    echo '</div>';
                    // Ends the Post Thumbs

                echo '</div>';
                // Ends Slider Left

                // Starts Slider Right
                echo '<div class="slider_right">';

                    $slider = array( 'posts_per_page' => '6' ); // Query definitions
                    query_posts( $slider ); // Query Posts
                        while ( have_posts() ) : the_post();

                        // Variable for the Content
                        $key_content[] = ''.get_the_content().'';

                        echo '<div class="slider_text" id="text_';
                            echo count($key_content)-1;
                        echo '">';

                            echo '<div class="slide_title">';
                                echo '<a href="'; the_permalink(); echo'">';
                                    echo the_title();
                                echo '</a>';
                            echo '</div>';

                            echo '<div class="slide_des">';
                                echo limit_words(get_the_excerpt(), '40');
                            echo '</div>';

                            echo '<div class="related_posts">';

                                echo '<div class="relatedposts_title">';
                                    echo 'Related Posts';
                                echo '</div>'; //The title of the boxes

                                echo '<div class="category_def">';
                                    $cat = the_category($post->ID); // Get current category
                                echo '</div>';

                                global $post;
                                $args = array( 'numberposts' => '2', 'category_name' => $cat ); // Query definitions
                                $query = get_posts($args);

                                foreach( $query as $post ) :    setup_postdata($post);

                                    //Start the item
                                    echo '<div class="relatedposts_post">';

                                        // Display the Title
                                        echo '<a href="';
                                            the_permalink();
                                        echo '">&raquo; ';
                                            the_title();
                                        echo '</a>';

                                    echo '</div>';
                                    //Ends the item

                                endforeach;

                            echo '</div>';

                        echo '</div>';

                        endwhile;
                    wp_reset_query();

                echo '</div>';
                // Ends the Slider Right

            echo '</div>';
        echo '</div>';
        // Ends Slider Area

335 posts
  • Netherlands
  • Sold between 10 000 and 50 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Bought between 10 and 49 items
  • Referred between 50 and 99 users
  • Has been a member for 3-4 years
RikdeVos says

There’s this thing in Javascript called loops ;)

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

why create something that already exists ?! why recreate the wheel! i really do not get you guys…

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
why create something that already exists ?! why recreate the wheel! i really do not get you guys…
  1. I spent several days trying different scripts (nivo slider, AnythingSlider etc.) and none of them worked for me;
  2. I need a custom solution for this theme;
  3. I like to learn how things are done ;)

Anyway, any of you could please explain me how I can use the Javascript loops to build this slider?

Thank you :)

2213 posts
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Germany
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+4 more
crozer says
duotive said
why create something that already exists ?! why recreate the wheel! i really do not get you guys…

Lol.

@ThemesFever: If you want to create your own slider, you need to consider dynamism. Do this as I have done on my latest theme:

  • Let the user put his slides within a container (take nivoSlider for example: you have a div with a certain class, and the user can put whatever he wants within it)
  • the jQuery part: Calculate number of slides
  • Based on that, calculate your thumbs
  • Generate a variable that stores your slides (and if you want, another variable with your thumbs)
  • Loop through this variable (eg. using jQuery’s each function) and start building your slider up
  • Here come transitions, animations and events (eg. on click make the slider slide to the left).

And if you have no idea what I just said, use an already-built slider!

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

Trying new things is great, that’s why I am trying to help.

But better become more advanced with jQuery before implementing custom sliders into your code.

The first step would be to learn JavaScript better. Because a JavaScripter who doesn’t have a clue what jQuery is will immediately spot performance, semantic, logic issues on your code.
The second step will be to advance on jQuery plugin development – you can learn a lot from practicing just that.

Regards,
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
crozer said
duotive said
why create something that already exists ?! why recreate the wheel! i really do not get you guys…

Lol.

@ThemesFever: If you want to create your own slider, you need to consider dynamism. Do this as I have done on my latest theme:

  • Let the user put his slides within a container (take nivoSlider for example: you have a div with a certain class, and the user can put whatever he wants within it)
  • the jQuery part: Calculate number of slides
  • Based on that, calculate your thumbs
  • Generate a variable that stores your slides (and if you want, another variable with your thumbs)
  • Loop through this variable (eg. using jQuery’s each function) and start building your slider up
  • Here come transitions, animations and events (eg. on click make the slider slide to the left).
And if you have no idea what I just said, use an already-built slider!
cmt said
Trying new things is great, that’s why I am trying to help.

But better become more advanced with jQuery before implementing custom sliders into your code.

The first step would be to learn JavaScript better. Because a JavaScripter who doesn’t have a clue what jQuery is will immediately spot performance, semantic, logic issues on your code.
The second step will be to advance on jQuery plugin development – you can learn a lot from practicing just that.

Regards,
Boris

Thank you crozer and cmt, that was exactly what I was looking for :) I know Javascript, the problem is that sometimes I just don’t make the best decisions :P

by
by
by
by
by
by