/    Sign up×
Community /Pin to ProfileBookmark

Jquery slideshow navigation….

Hey guys,

First of all I want to point out that this is my second attempt at ever creating a website, so bear with me as I am definitely newbie.. I’m creating a site which, so far has worked out the way I wanted to and have included a slideshow at the top using the jquery cycle plugin.

Here is the site:
[url]http://www.colfaxgrange.com/public_html/index.php[/url]

Calling premade functions is about the extent of my coding knowledge/understanding. Using the jquery cycle plugin, I am trying to create an interactive section for promotional content which will cycle through different divs. What I would like to do is create image thumbnails underneath the slides for navigation. For example, I would like a static thumbnail image of a wrench that will pull up the hardware slide and display promotional content for this department. So far all I am able to do is create a nav bar that includes the slide number (and only because this is easily implemented through the plugin). I have no idea how to define an image for the navigation.. I’ve seen examples on the plugin developer’s page of slide images being resized and created into thumbnails for navigation. I don’t think this would work as I’m transitioning between divs instead of images. I’ve tried a few other slideshow plugins but these didn’t do the trick either. I’m hoping this is possible with the jquery cycle plugin. Any help would be GREATLY appreciated.

Here is a link to the cycle plugin website:
[url]http://jquery.malsup.com/cycle/pager2.html[/url]

Thank you!

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@WesterlyJul 03.2010 — Download free complete application, including demo.

Automatic R to L scrolling until a thumbnail is clicked.

No framework is used.

See attached screen shot.

http://www.javascript-demos.com/download_center_lite/index_t.php?Image_Link_Scroller.zip

[upl-file uuid=aab1097b-cb0c-4ba3-a7c9-9d1f3495db5a size=98kB]Image_Link_Scroller.gif[/upl-file]
Copy linkTweet thisAlerts:
@insafeusteauthorJul 05.2010 — Thank you for the suggestion! However, I still have the same issues.. I am trying to slide between divs, not just images. Also, this slideshow seems to dynamically resize the main picture image, so I am still unable to assign my own static thumbnails. It seems like a good lightweight script though, I will keep it around in case I need it for another site.
Copy linkTweet thisAlerts:
@insafeusteauthorJul 06.2010 — Solved!

Okay I'll admit im still not sure how the pagerAnchorBuilder works, but i've found the solution browsing through the plugin developer's site;

<script type="text/javascript">

$('#advert').cycle({
fx: 'scrollLeft',
speed: 'fast',
timeout: 0,
pager: '#adnav',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#adnav li:eq(' + (idx) + ') a';
}
});




</script>


Then I simply needed to specify image paths for the different li's in "#adnav".
×

Success!

Help @insafeuste spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...