Solved

Jquery Flexslider

Posted on 2014-09-10
12
210 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

 

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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

617 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