DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
552 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
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
  • 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
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!

2217 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+10 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.

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
552 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
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

341 posts
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Netherlands
+4 more
RikdeVos says

There’s this thing in Javascript called loops ;)

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

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

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
552 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
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 :)

2217 posts
  • Has referred 200+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+10 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
  • 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

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

DiogoRedinDevelopment
DiogoRedinDevelopment Recent Posts Threads Started
552 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
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