Hello,

I have a list (ul) with list-items (li), all of which have links (a:link). Only one of those links has the class="active".

I'm trying to set up a jcarousel so the 'offset' (i.e. which image the carousel starts with), is dynamically set up by finding whichever link tag has the class = "active".

Let's say I have ten list-items and the fourth <li> has a link with the class "active" attached to it. How can I query the list, find the 'a class="active"', find the ordinal of the list-item (in this example: "4"), and then fly in that number to my jcarousel code thusly?:

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
start: 4
});
});

Kari- Thanks for the idea, very much appreciated.

Probably my inexperience but I'm not able to get it to work though.

I've tried this:

var container = $('#list');
var startPlace = $('li a',container).index($('.active',container));
jQuery(document).ready(function() {
jQuery('#list').jcarousel({
start: startPlace
});
});

HTML:
<ul id="list">
<li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">1</a></li>
<li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">2</a></li>
<li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="active">3</a></li>
<li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">4</a></li>
</ul>

But does not work. Can you correct what I'm doing wrong?

It works! (but oddly without the semicolon.. using jQuery 1.2.6 and also 1.3.2)

Superb advice - *really* appreciate the help!

Sweet.

This will be used on a site built on Drupal - specifically a multi-gallery slide show presentation using jCarousel as the gallery menu, and the Gallerific plugin for each gallery. Drupal Views generates the HTML, and the js supplies the presentation.

Very cool!

Would be happy to.

I'm using a CCK content type ('gallery') which has fields for the name of the photographer, the images themselves (using imagefield), and an additional imagefield for the thumbnail for the gallery.

I'm using Gallerific for my image presentation (it's flexible and I really like that only one image loads initially, and other images are linked to, and then presented via ajax). There's no Drupal module for Gallerific so I fly the script in on the page template.

The first thing I did was set up the node-gallery.tpl.php file so that it works with gallerific. I don't actually ever need a teaser view for each gallery in this site, so in the tpl.php file I simply have:


<div class="content">
<?php if ($node->field_gallery_photocredit[0]['value']) {?>
<p class="photocredit">Images courtesy of <?php print $node->field_gallery_photocredit[0]['value']?></p>
<?php }?>
<?php if ($node->field_showcase_image): ?>
<div id="thumbs-adv" class="navigation">
<h4>Images:</h4>
<ul class="thumbs noscript">
<?php
$i = 1;
foreach($node->field_gallery_image as $img) {
print '<li><a class="thumb" href="/' . $img['filepath'] . '?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="' . $i. '">'. $i .'</a></li>' . "\n";
$i++;
}
?>
</ul>

</div>
<div id="gallery-adv" class="gallerycontent">
<div id="controls-adv" class="controls"></div>
<div id="slideshow-adv" class="slideshow"></div>
</div>
<?php endif; ?>
</div>


That set up the Gallerific display. Now I need a menu on the side with thumbnails for each gallery (in a jcaroursel), so I created a View - specifically a block which contains an html list of all galleries. I use fields instead of full node and only use the field of the thumbnail image, linked to the node. I called the View "gallery menu".

Using the Views 2 theming system I create a file in the theme directory called 'views-view-list--gallery-menu.tpl.php' with the following code:


<?php $i=1;?>
<script type="text/javascript">
var container = $('#gallery_menu');
var startingPosition = $('li a',container).index($('.active',container));
jQuery(document).ready(function() {
jQuery('#gallery_menu').jcarousel({
auto: 0,
scroll: 4, //or however many thumbnails you want displayed
vertical: true,
start: startingPosition,
wrap: 'last',
});

$("#gallery_menu a:not(.active)").fadeTo("fast", 0.6);
$("#gallery_menu a:not(.active)").hover(function(){
$(this).fadeTo("fast", 1.0);
},function(){
$(this).fadeTo("fast", 0.6);
});
});
</script>
<ul id="gallery_menu" class="jcarousel-skin-gallery" <?php //print $options['type']; ?>>
<?php foreach ($rows as $id => $row): ?>
<?php $i++; ?>
<li class="<?php print $i;?>"><?php print $row; ?></li>
<?php endforeach; ?>
</<?php print $options['type']; ?>>


as you can see, Kari's suggestions on this thread allow a user to click the thumbnail, see the related gallery; click another thumb and see that gallery - while the thumbnail retains it's proper position in the jcarousel order. Drupal inserts the 'active' class at the correct thumbnail.

You should probably post a link to a live example here when you have one available.

Hi Guys-

Thought I'd post the url for the project this thread was related to. The site is live now: http://stoneeventplanning.com

As mentioned before the project was to replace a flash site with a Drupal site, so as to have a content management system and to further SEO. As of this writing (22 Apr 2009) the site follows the requirements of replicating the original deisgn and functions, but as a Drupal site.

I'm happy to report that within a couple of weeks the SEO goals were reached, and the client seems delighted with the project.

For grins the original flash site has been preserved at: http://swf.stoneeventplanning.com

Cheers,
Shaun

Hmm, you're right. That's new I think - will investigate