Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By khanz on
Hi folks,
I am a newbie and non-programmer having a bit of problem with jCarousel. I have searched in the forum and couldn't come up with an answer. I am using D5.5, and after inserting the code in the block i am getting the images vertically and all the images are shown together (plz see the screenshot- http://i148.photobucket.com/albums/s12/khanfit/jcarousal.jpg). Can someone plz look at the code and check whats wrong in there or is there something else i need to do. The code is as following..
<?php
jcarousel_add();
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="100" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="100" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="100" alt="" /></li>
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="100" alt="" /></li>
</ul>Thanks.
Comments
Isn't there anyone who can
Isn't there anyone who can help me?
------------
Volvo, Video, Velcro. (I came, I saw, I stuck around.)
Hi there, I'm stuck at this
Hi there,
I'm stuck at this stage as well!
Working example for Jcarousel
I have just succeeded in getting Jcarousel working
Problems (no 'skins' were present in the download ... you have to find and install them under jcarousel/skins/tango ... also the .png files which are the next and previous arrows .. you will find them in
the same place the tango skin.css is ... if you replace skin.css at the end of the URL with the names of the
png files .. look inside the skin.css for the filenames.
Make sure you have the jquery and I think the jquery update installed.
So you need to install jquery, jquery update (for Drupal) and the Jcarousel modules and enable them
At the end of this post is full working code (HTML, Javascript and PHP) which can be included directly in
your module.
If you put the (tango) skin.css) and associated .png files (for the next and prev arrows) under a directory
(you must create /jcarousel/skins/tango) this should all work.
First some links (which helped me) ....
Here is the main site (examples) ... but no code
http://sorgalla.com/jcarousel/
Here is another site (actually this vertical carousel doesn’t work .. but it did show me how to include inline javascript properly in Drupal
http://chirale.wordpress.com/2008/01/13/make-jcarousel-and-contemplate-w...
Here is a proper explanation of Jcarousel with code examples
http://sorgalla.com/projects/jcarousel/
Finally here is some working Drupal code. Include this in a module and unpack the tar.gz file to get a complete
(including the tango skin which you can’t get easily ... etc.) working Jcarousel module which you will have to enable
(and install) of course jquery and the update are necessary ...
function jcarousel_content()
{
$op = '
ul id="mycarousel" class="jcarousel-skin-tango">
li> img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />/li>
li> img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />/li>
/ul>
';
return $op;
}
//////////
jcarousel_add(); //you need to do this to ensure the javascript is present ...
$js = "jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: false,
animation: 1000,
//visible: 4,
scroll: 2
});
});";
drupal_add_js($js, 'inline', 'header');
$op .= jcarousel_content();
Thats is !
Good luck
Getting the Flickr Info
Would you mind sharing the code you use to get the URLs from Flickr?
Thanks!
Oh sorry - the location of the missing css & png files
http://sorgalla.com/projects/jcarousel/skins/tango/skin.css
http://sorgalla.com/projects/jcarousel/skins/tango/next-vertical.png
This is where to find them (download the css first, check for the names of the vertical & horizontal png files
and then put them at the end of the URL to download them
Image not in centre
Can someone help me figure this out. I am using JCarousal on Publisher Gazette (Drupal 7) but the images do not appear in the centre. Please see site (http//caribbeanpressinternational.com).
Grateful for any fixes and thanks a million
Dan