Solved

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

Posted on 2010-09-15
2
427 Views
Last Modified: 2012-05-10
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
Comment
Question by:doRodrigo
2 Comments
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33688593
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
 

Author Closing Comment

by:doRodrigo
ID: 33689253
Thanks man that's exactly what I needed! Cheers mate!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Powershell Code 3 42
Session on Html 8 38
Aspx calendar pop up control 3 27
Check input text, Number 6 28
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

735 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