Solved

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

Posted on 2010-09-15
2
430 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
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…

729 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