Customize Genesis Responsive Slider with Thumbnail navigation (Agency Theme)

Community Forums Forums Design Tips and Tricks Customize Genesis Responsive Slider with Thumbnail navigation (Agency Theme)

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  ebflute 1 year, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17949

    ebflute
    Participant
    Post count: 10

    Hi,

    I need help learning where to start to add thumbnail navigation to the responsive slider. Or how to insert another slideshow into the area where the slideshow appears on the home page. I tried adding some jQuery to the head for another slideshow and then I put in the html into a widget but it is picking up the Genesis slideshow not the one that I added.

    dev.makeitbe.org is my testing site.

    This is the html I put into a Home Slider widget:

    <code><div class=”flexslider”>

    <ul class=”slides”>

    <li data-thumb=”/wp-content/uploads/2013/01/thumb-s1.jpg”>

    <img src=”/wp-content/uploads/2013/01/slider-pledge_s1.jpg” />

    </li>

    <li data-thumb=”/wp-content/uploads/2013/01/thumb-s1.jpg”>

    <img src=”http://placekitten.com/g/960/336″ />

    </li>

    <li data-thumb=”/wp-content/uploads/2013/01/thumb-s1.jpg”>

    <img src=”http://placekitten.com/960/300″ />

    </li>

    <li data-thumb=”/wp-content/uploads/2013/01/thumb-s1.jpg”>

    <img src=”http://placekitten.com/g/960/336″ />

    </li>

    <li data-thumb=”/wp-content/uploads/2013/01/thumb-s1.jpg”>

    <img src=”http://placekitten.com/960/336″ />

    </li>

    </ul>

    </div></code>

    and I added this to the footer.

    <code><script>

    $(‘.flexslider’).flexslider({
    animation: “slide”,
    controlNav: “thumbnails”
    });
    </script></code>

    And I have added this code to the functions file:

    <code>/** Add jquery for slider */
    add_action(‘genesis_meta’, ‘flexsliderjs’);
    function flexsliderjs() {
    if(is_home()) {
    wp_register_script( ‘jquery’, ‘/wp-content/themes/agency/js/jquery.flexslider-min.js’);
    wp_enqueue_script( ‘jquery’ );
    wp_register_style( ‘css’, ‘/wp-content/themes/agency/flexslider.css’);
    wp_enqueue_style( ‘css’ );
    }
    }</code>

    Knowing where to start would be really helpful!! Thanks in advance!!

    Linda

    • This topic was modified 1 year, 8 months ago by  ebflute.
    • This topic was modified 1 year, 8 months ago by  ebflute. Reason: Added which theme I am using
    • This topic was modified 1 year, 8 months ago by  ebflute.
    • This topic was modified 1 year, 8 months ago by  ebflute. Reason: Added which theme I am using
    #17960

    SoZo
    Moderator
    Post count: 1573

    Please include a link to your site with all questions so that people can see what is going on.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #17962

    ebflute
    Participant
    Post count: 10

    http://dev.makeitbe.org

    Thank you!

    #17971

    ebflute
    Participant
    Post count: 10

    Here is my comp of how I want it to look:
    https://www.dropbox.com/s/whfomjwm7ytz5sd/mib-comp-D.jpg

    #17972

    SoZo
    Moderator
    Post count: 1573

    I’m not seeing the genesis slider. I’m seeing flexslider added through a text widget.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #18034

    ebflute
    Participant
    Post count: 10

    Is there a way for me to use the Genesis Responsive Slider but with thumbnail navigation? This flexslider doesn’t show up properly and it didn’t show up at all until I activated the Genesis Slider.

    Perhaps my flexslider isn’t showing up properly because the path is not right as I have nested it in a text widget. The paths may be off in the js and the css. I will take a look at this.

    Can you help me do approach this properly, either by adding the flexslider in the functions file or customize the Genesis Slider using thumbnail navigation? I would like to use proper coding to achieve the slider layout.

    Thank you for taking the time to look at it!! I really appreciate it.

    #18056

    SoZo
    Moderator
    Post count: 1573

    No, the Genesis Slider doesn’t have thumbnail navigation. And I am not currently taking on clients. You could grab the slider from the Delicious theme if you have access to that theme.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #18085

    ebflute
    Participant
    Post count: 10

    So to update, I have cleaned up the code so that it is only displaying the Genesis Responsive Slider and the circles. I think all I need is to learn how to replace the circles with my thumbnail images. The numbers are being swapped out for circles so it must be able to be done.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.