• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 437
  • Last Modified:

How to use Jquery carousel for images with only one image apearing at a time

Hi folks, I want to make a carousel that will show an image and if you click on the arrow to the left it will show the next and so forth, the problem is that I only found a carousel that show three images at a time... I'm adding a link for the type of carousel that I wanted to use for references purpose. I'd like for the person also be able to click on the image and the rest of the site fades while showing a larger version of that said image... They call in the link mentioned as Thickbox... Any help on how to use it would be much appreciated.
Bellow goes the link:

http://jquery.com/demo/thickbox/
0
doRodrigo
Asked:
doRodrigo
1 Solution
 
kadabaCommented:
This is a mix of jcarousel and fancy box. if you need to change the width etc you will need to change jCarousel skin stylesheet or if you would want to go ahead with the thick box(not supported) you refer to link

http://sorgalla.com/projects/jcarousel/examples/special_thickbox.html

Best,
kadaba


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Fancy box</title>
<link href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
  -->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />


<!--
  Fancy Box
-->
<script type="text/javascript" src="http://fancybox.net//js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancybox.net//js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        visible: 1,
		scroll: 1
    });
	$(".fancybx").fancybox();

});
</script>
<style type="text/css">
img{
border:0;
}
</style>
</head>
<body>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li>
		<a class="fancybx" href="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg">
			<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />
		</a>	
	</li>
    <li>
		<a class="fancybx" href="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg">
			<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
		</a>	
	</li>
    <li>
		<a class="fancybx" href="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg">
			<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
		</a>
	</li>
    <li>
		<a class="fancybx" href="http://static.flickr.com/77/199481108_4359e6b971_s.jpg">
			<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
		</a>
	</li>
    <li>
		<a class="fancybx" href="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg">
			<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
		</a>
	</li>
  </ul>

</div>
</body>
</html>

Open in new window

0
 
doRodrigoAuthor Commented:
Thanks man that's exactly what I needed! Cheers mate!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Tackle projects and never again get stuck behind a technical roadblock.
Join Now