Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorswortis
    • CommentTimeMar 20th 2009 edited
     permalink
    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
    });
    });
  1.  permalink
    This 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>

    with this sort of Javascript
    var container = $('#list');
    var offset = $('li a',container).index($('.active',container));

    should give you "2" for the value of the offset variable, which is the index of the LI A element with a class of "active". Just add +1 to that if you need to start from one instead of zero.
    • CommentAuthorswortis
    • CommentTimeMar 22nd 2009
     permalink
    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?
    •  
      CommentAuthorkari.patila
    • CommentTimeMar 22nd 2009 edited
     permalink
    You should add a semicolon after start: startPlace;.

    The problem might be that you are using an older version of jQuery. I did the example with 1.3.1 and it works fine. Not so with 1.2.1.

    $(document).ready(function() {
    var container = $('#list'); //better call the whole thing from inside document.ready
    var startPlace = $('li a',container).index($('.active',container));
    startPlace = startPlace + 1; // let's add one to startPlace so that we begin with 1 instead of 0
    $('#list').jcarousel({
    start: startPlace // no need for a semicolon here, as explained later in this thread
    });
    });

    startPlace might not be available inside the jcarousel function, so we'll have to tackle that one next if this doesn't work as is.
    • CommentAuthorswortis
    • CommentTimeMar 22nd 2009
     permalink
    It works! (but oddly without the semicolon.. using jQuery 1.2.6 and also 1.3.2)

    Superb advice - *really* appreciate the help!
  2.  permalink
    Oh, that's not odd at all. Somehow I missed that you were passing a list of parameters (a list of one in this case) to jcarousel instead of declaring variables.

    Nice to see it worked. I actually used some of this code myself.
    • CommentAuthorswortis
    • CommentTimeMar 23rd 2009 edited
     permalink
    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!
  3.  permalink
    Sounds like exactly what I was planning to do on Drupal for my photosite. Would you mind sharing how you applied it in practise?
    • CommentAuthorswortis
    • CommentTimeApr 1st 2009
     permalink

    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.

    • CommentAuthorshiroitatsu
    • CommentTimeApr 2nd 2009 edited
     permalink
    This is great, thanks! It's going to help a lot when i'm building my site. I just hope that they could also add this as a feature to the views jcarousel -module — would make implementing it a lot simpler for javascript/php illiterate designers.
  4.  permalink
    You should probably post a link to a live example here when you have one available.
    • CommentAuthorswortis
    • CommentTimeApr 2nd 2009
     permalink
    Yes - I will do that. Should be up next week.
    • CommentAuthorswortis
    • CommentTimeApr 22nd 2009
     permalink
    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
  5.  permalink
    Nice work replicating the site as a Drupal-site. Just it seems that the jCarousel offsetting is not working — the menu always jumps back to the first image.
    • CommentAuthorswortis
    • CommentTimeJun 3rd 2009
     permalink
    Hmm, you're right. That's new I think - will investigate
    • CommentAuthorswortis
    • CommentTimeJun 3rd 2009
     permalink
    I think this is now fixed. I moved the jcarousel configurations to the page.tpl.php (was on views-view-list--showcase-menu.tpl.php)

    Thanks for finding that!
Add your comments
    Username Password
  • Format comments as (Help)