Solved

Jquery Flexslider

Posted on 2014-09-10
12
207 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

740 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