Log in

View Full Version : Vertical Image Slide On-Click with Arrows Script


trumpdown
10-07-2008, 01:27 PM
Hi,

I am hoping someone can direct me on this very SPECIFIC script.

OK.

I have an UP arrow and a DOWN arrow and I have 30 or so IMAGES vertically aligned. (Only 7 images are visible at a time including the 2 arrow buttons) The UP arrow is above the top image and the DOWN arrow is below the bottom image. (I'd like to use my own custom UP and DOWN buttons if possible)

The user clicks the top arrow and all the images slide up one position.
The user clicks the bottom arrow and all the images slide down one position.
The images are all in a loop so once the user scrolls through all 30 or so images the loop will continue.
The images are all linkable.

I have spent many hours looking for this script. If someone could please direct me in the right direction I would be much obliged.

Regards,

Nate
Medyman
10-07-2008, 02:28 PM
You're looking for jCorousel (http://sorgalla.com/jcarousel/). Specfically, look at this example (http://sorgalla.com/projects/jcarousel/examples/static_vertical.html). The example doesn't have links but you can add them.
trumpdown
10-07-2008, 03:43 PM
Thank you Medyman!

I want to use the Vertical Carousel with static HTML.

This line confuses me after looking over all the code.

"The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation)."

Can you tell me how to set-up my images, and where they go..etc...? As a noob I am greatly perplexed..

Best,

Nate
Medyman
10-07-2008, 04:23 PM
Hey Nate...

First, this is a jQuery (http://jquery.com/) plugin. So the first thing you should do is download and link to jQuery. Next, download the jCarousel scripts (http://sorgalla.com/projects/jcarousel/) and link to them (both CSS and JS).

The carousel is created using very simple markup. The example I linked to before uses:

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
</ul>

It's a basic unordered list with an image within each list item. If you want, you can add a link to these images. The id of the <ul> can be anything, but the classes should be as above.

Lastly, you'll need to initiate the carousel. The bare minimum that you need to do this is:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true
});
});
</script>
That should go within the <head> section of your code. If you changed the id, change it in the code as well (mycarousel refers to the id).

There are more configuration options available to you. You can read about them on the site.
trumpdown
10-07-2008, 04:46 PM
Thanks again...Sorry for my ignorance...This saved me much time and I needed help from an elite member..
sidhu
06-11-2010, 07:52 PM
Though I've been using Dynamic Drive's Java Script and other solutions for sometime now, I never registered. But today, I felt obliged to join and thank you for helping me. It's a great community and Dynamic Drive is just awesome. I Love You, DD.