Look att this page:
http://jonas.multimedialab.se/demo/slideshow.html . Is there a way I could add jCarousel to my thumbnails. And how do I do that?
Here is the code:
1.
Copy code
<!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">
<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/jcarousel/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide</title>
<link href="assets/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/**
* For the Slideshow
*/
#slideshow { left:100px; bbackground: #eee; bborder: 1px solid #ccc;}
#nav { width: 100%; height: 80px; margin: 15px; }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
<!--
jQuery library
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--
Chili library
-->
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<!--
jQuery.cycle library
-->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<!--
jQuery.easing library
-->
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!--
jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript">
$(function() {
//Flickr Integration
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729@N22&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
//if(i<=5){ // <— change this number to display more or less images
$("<img/>").attr("src", item.media.m).appendTo("#slideshow")
.wrap("<a href='" + item.link + "' target='_blank' title='Flickr'></a>");
//}
}); //End each
$('#slideshow').after('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var src = $('img',slide).attr('src');
return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>';
}
}); //End cycle
}); //End getJSON
}); //End function
</script>
</head>
<body>
<div id="slideshow" class="jcarousel-skin-tango"></div>
</body>
</html>
No statusWorking on itAnsweredNeed more info
