Solved

Jquery Flexslider

Posted on 2014-09-10
12
204 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

825 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