Response title
This is preview!
Move this topic
Malsup Cycle Plugin as Product Thumb Navigation...
in Using jQuery Plugins
•
11 years ago
I have a Cycle Plugin carousel of 20 product thumbs split into 4 slides of 5 thumb images each slide. This scrolls horizontally forwards and backwards with left/right navigation.
This carousel is situated below the products being displayed. The user can navigate forwards and backward through these 4 slides, however, when they pick a product to look at the carousel always resets itself back to the first slide.
How can I set it so that when an image in one of the 4 slides is clicked and we move to that product's page, that slide stays active when the page loads? It's annoying to have to scroll back through the 4 slides to find the one that had the active product on it.
Any help would be greatly appreciated!
1
Replies(17)
Sounds like you have a bunch of pages with the same slideshow. Try using the 'startingSlide' option as appropriate for each page.
Yes, you're absolutely right, it's the same slideshow on every page. Is there a way to pass the current slide to a variable in the configuration as the new page loads so that this doesn't have to be hard coded onto every product page?
I've been messing about with this example http://jquery.malsup.com/cycle/perma.html but haven't been able figure out the solution. Unfortunately my skills with jQuery and Javascript aren't all that great, I mostly just copy from smart people like you :)
Thanks for the help.
Leave a comment on malsup's reply
The guy in this post was trying to do the exact same thing over 2.5 years ago but I can't make this work...
http://old.nabble.com/jQuery-cycle-and-handling-new-request-page-changed-td19819282s27240.html
...this is driving me mad.
http://old.nabble.com/jQuery-cycle-and-handling-new-request-page-changed-td19819282s27240.html
...this is driving me mad.
Leave a comment on Fatbat's reply
I've tried implementing the version above but it just renders the slideshow inoperable. All 4 rows of slides are visible and nothing functions. Can you please help? That post is over 2.5 years and probably several versions of the script old.
Leave a comment on Fatbat's reply
Are there paramaters exisitng in your url structure that you can parse to determine which start slide to use?
If not you would likely need to establish a hash system in url's. Then use the hash to determine starting slide.
If not you would likely need to establish a hash system in url's. Then use the hash to determine starting slide.
Leave a comment on charlietfl's reply
Yes, currently I have this demo in place which has such a hash included...
which is passing the active slide number to the URL. In the nabble.com example posted above they are using a cookie to pass this number to the page that's loading and inserting into the 'startingSlide' option as suggested by malsup above. I understand how it's supposed to work, I'm just not getting the code right.
Leave a comment on Fatbat's reply
It's link on your site that counts, not a demo elsewhere. If I use demo link above...what are you wanting to have happen step by step.
If I click on a thumb it loads a new page. i believe you are wanting the thumb scroller to match page. There is no hash system on any of these pages. Is this what you are trying to resolve?
If I click on a thumb it loads a new page. i believe you are wanting the thumb scroller to match page. There is no hash system on any of these pages. Is this what you are trying to resolve?
Leave a comment on charlietfl's reply
I had already posted the link to my site and I do believe both my site and the Malsup demo both have a hash the amends the URL to the slide frame with a #1, #2, #3, #4, etc.
You are correct, I want the slide frame to match the image clicked.
Thank you ever so much for your help!
Leave a comment on Fatbat's reply
Does anyone know how to fix this?
Leave a comment on Fatbat's reply
2 ways that come to mind.
1) Put appropriate hash in all your href's and use hash system you have already discovered
href="oliver.php#2"
you could add this with jquery , use server code or hard code it
2) Create an array of all your pagenames and their position in your slider, then parse the url and determine start position from pagename
1) Put appropriate hash in all your href's and use hash system you have already discovered
href="oliver.php#2"
you could add this with jquery , use server code or hard code it
2) Create an array of all your pagenames and their position in your slider, then parse the url and determine start position from pagename
Leave a comment on charlietfl's reply
OK, I was able to get suggestion 1 to work easy enough. Just a couple concerns; one, would those links have any negative effect on SEO, links and pages with .php#2, .php#3, etc.? Two, if a person arrives through one of those product pages then the slide isn't in the right position.
I think malsup's suggestion to try using the 'startingSlide' option is the way to go, but I can't figure out how to do this and he hasn't come back since despite my PMing him for help. I was trying to implement it this way... http://old.nabble.com/jQuery-cycle-and-handling-new-request-page-changed-td19819282s27240.html but can't get it to work.
Thoughts?
Leave a comment on Fatbat's reply
My perma demo that you linked to previously shows exactly how to use the startingSlide option driven from a URL hash.
Leave a comment on malsup's reply
You're not a man of many words and it's terribly frustrating.
Your demo shows how to pass a hash to the URL, but I don't see how it's passing anything to the startingSlide which is set to "index" by default. Is this being done through a cookie? How is it being done? I'd rather not have to hardcode the hash into each product href which is the way I've done it now. Also, if someone arrives via a search result onto a product page the starting slide is still index, it doesn't load the right slide for that product. How can I fix these things?
You also didn't answer my question about how the links are going to be interpreted by the search engines. Is that going to be a problem?
What about the other example I linked to, the old.nabble site that talked about cookies and whatnot? Is that example no longer relevant?
I'm looking for the most streamlined method of doing this that just works on every page and doesn't impact SEO. I've asked, nay practically begged you for some help on this. Won't you please just help me instead of talking in riddles and partial answers?
Leave a comment on Fatbat's reply
demo reads the hash value such as "#1",
then var index=1 is passed to startingSlide
You could also do some of this server side by writing the index based on an array of your file names into a javascript variable in the page and pass that to the startingSlide
php could write a simple script tag ( before cycle initialize code)
<script type="text/javascript>
var thisPageStartSlide= 3;
</script>
then pass the above variable to startingSlide: thisPageStartSlide
Don't like this option- then could use javascript to parse url's, compare file name to array to do the same. Lots of info on web and jquery plugins how to parse a url
Not fair to condemn others for trying to help.... nobody knows what level of comprehension you have when dealing with issues like parsing urls or passing variables into an object, or working with something like an array, or handling php code, jquery or.......
then var index=1 is passed to startingSlide
You could also do some of this server side by writing the index based on an array of your file names into a javascript variable in the page and pass that to the startingSlide
php could write a simple script tag ( before cycle initialize code)
<script type="text/javascript>
var thisPageStartSlide= 3;
</script>
then pass the above variable to startingSlide: thisPageStartSlide
Don't like this option- then could use javascript to parse url's, compare file name to array to do the same. Lots of info on web and jquery plugins how to parse a url
Not fair to condemn others for trying to help.... nobody knows what level of comprehension you have when dealing with issues like parsing urls or passing variables into an object, or working with something like an array, or handling php code, jquery or.......
Leave a comment on charlietfl's reply
Not condemning anyone, not at all. Malsup is obviously brilliant, his cycle script one of the most versatile of its type that I know of, but I made it pretty clear my jQuery skills aren't that strong. I've even offered to pay him for his time if he would help me arrive at the best solution that he could think of, but it appears he's not interested, which is fine. He's not obligated to do anything. If my post came across as snarky, I'm sorry, I'm just searching for the answers which I haven't been able to figure out on my own.
I'm trying to learn, I really am, but there just isn't enough time in the day to learn everything. Your examples and explanations are a huge help. I now understand the options better. Thank you.
Leave a comment on Fatbat's reply
Sorry, didn't mean to be coy or challenge you with riddles. I referred to the perma page because it handles the situation you've described with just five lines of code. I thought that would be straight-forward enough to follow, apologies if it wasn't. Here are those five lines:
- var index = 0, hash = window.location.hash;
- if (hash) {
- index = /\d+/.exec(hash)[0];
- index = (parseInt(index) || 1) - 1; // slides are zero-based
- }
Line 1 initializes two variables. As you noted, 'index' is later passed to cycle as the value for the 'startingSlide' option. It is initially set to 0 so that if there is no hash information the slideshow will start with the first slide. Next, the hash is interrogated and a regex is used to extract an integer value. So as charlietfl noted, if your url looks like this:
'index' will be updated to the value of 2 (1 is subtracted) and so the slideshow will start on the third slide (slide indexes are zero-based). So in my example, the assumption is that external links that need to drive a particular slide in the slideshow need to use the url form shown above. There are other ways to do this, but you wanted simple, and this is pretty simple.
I don't see why there would be any issues with SEO.
Re the old nabble thread, that conversation is dated and no longer relevant. It's not necessary to use parseInt on cycle's options anymore.
Cheers!
Leave a comment on malsup's reply
Sorry I haven't been around for awhile. Thank you very much for the much more detailed reply Malsup. I think I've got it now!
Cheers to you too.
Leave a comment on Fatbat's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Fatbat's question
{"z2655295":[14737000002484842,14737000002522240,14737000002521631],"z4696694":[14737000002490014,14737000002491202,14737000002491438,14737000002511492,14737000002511540,14737000002511608,14737000002516281,14737000002520199,14737000002520976,14737000002523101,14737000002538965],"z1411412":[14737000002512208,14737000002512263,14737000002520055,14737000002521522]}