Solved

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

Posted on 2010-09-15
2
423 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
Comment Utility
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
Comment Utility
Thanks man that's exactly what I needed! Cheers mate!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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 if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now