Customize Genesis Responsive Slider with Thumbnail navigation (Agency Theme)

[ebflute]

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

[SoZo]

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

[ebflute]

http://dev.makeitbe.org

Thank you!

[ebflute]

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

[SoZo]

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

[ebflute]

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.

[SoZo]

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

[ebflute]

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.

[Author]

Posts