Solved

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

Posted on 2010-09-15
2
428 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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
This article will show, step by step, how to integrate R code into a R Sweave document
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…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

739 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