Solved

Jquery Flexslider

Posted on 2014-09-10
12
203 Views
Last Modified: 2014-09-10
This question relates to Q_28515681.html (from earlier today).

Please look at http://rkassoc.org/Davis/wooslider_thumb.html

Notice that the thumbnails underneath are "one off" the larger photos.

If you click on a thumbnail, it takes you NOT to that photo, but the one before.

Two questions:

(1) Why is the thumbnail to larger image relationship off?

(2) Why does the animation stop when a thumbnail is clicked?

html, css & js attached.
wooslider-thumb.html
jquery.flexslider.js
jquery.flexslider-min.js
flexslider.css
0
Comment
Question by:Richard Korts
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40315826
first you don't need both of this files :
<script src="jquery.flexslider.js"></script>
<script src="jquery.flexslider-min.js"></script>

The first one is for development purpose if you need to debug the code
The second file is lighter because minified.
So start by removing one
0
 

Author Comment

by:Richard Korts
ID: 40315853
To leakim971:

I removed the first (bigger) one.

Still the same.

http://rkassoc.org/Davis/wooslider_thumb.html

If you know of a better slider that can do what I trying to do, please let me know.

Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315856
The version 2.2.2 is buggy.
Check here your code with version 2.0 : http://jsfiddle.net/b0aebb9r/

http://flexslider.woothemes.com/js/jquery.flexslider.js
0
 

Author Comment

by:Richard Korts
ID: 40315864
leakim971

It works what you put at jsfiddle (the thumbnail connections are correct).

How do I get version 2?

Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315866
click on the lin in the bottom of my previous question, that's all I did
0
 

Author Comment

by:Richard Korts
ID: 40315882
I figured it out (version 2.0).

That works perfectly for the correct thumbnail being hooked up.

Is there a way I can make it so that when I click on a thumbnail, it keeps on the slideshow after going to the selected image?

Thanks
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 82

Expert Comment

by:leakim971
ID: 40315891
until?
0
 

Author Comment

by:Richard Korts
ID: 40315901
To leakim971

Continuous.

Look at www.davispipe.com for how that works. That uses Flash, which I'm trying to get rid of for the obvious reasons.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40315914
"continuous" ?
0
 

Author Comment

by:Richard Korts
ID: 40315921
The slide show repeats indefinitely; it just keeps going.

I thought that animationLoop: true would accomplish that, it seems to UNTIL you click one of the thumbnails, then the animation stops.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40315935
check this page : http://jsfiddle.net/b0aebb9r/1/

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        slideshow: true,
        animationLoop: true
    });
    $('.flexslider ol img').click(function() {
        $('.flexslider').flexslider("play");
    });
});

Open in new window

0
 

Author Closing Comment

by:Richard Korts
ID: 40315961
That's perfect.

You know this stuff real well.

Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now