Nid's? We don't need no stinkin' nid's.

Posted July 11, 2012 by Shaun Gorneau

(Transloading a Lightbox Slideshow: Part 2)

Yeah, so you may remember the last blog post about transloading a lightbox slidshow. In working with another client, this requirement came up again; only this time we had to consider that the users managing the content would have very little (or no) HTML experience. This meant that adding "?image-only=1" to the href, adding the rel attribute (rel="associated-lightbox"), and finding the off-page slideshow's nid for the rel's group assignment (rel="associated-lightbox[123]") were pretty much out of the question.

Rethinking

First, let's define how this should work from the user's perspective:

  • Via the WYSIWG, they should be able to link a string of text to the path of the photo album. That's it; that's all that's required.

OK, so the user is no longer responsible for the rel attribute and the GET variable. How can we recognize and target links to photo albums? Well, this is a Drupal site (and this probably could be true for other CMSs), so we have a pathauto rule on our content type "Photo Album"; that rule being "photo-albums/[mod-raw]/[title-raw]". So we know all href values starting with "/photo-albums/" lead to a photo album. So we can use a selector with [attr^=value], as in

$('.node a[href^="/photo-albums/"]').each( function(){} );

So now we have our photo album links. For the most part, we go about things as we did in the previous method, except that we need to come up with a group assignment for each slideshow, and the node ids will not cut it. What about the alias created for the album itself? Each is unique to the album and should work just fine. So, now we have:

$('.node a[href^="/photo-albums/"]').each( function(){

    var thisLink = $(this);
    var url = thisLink.attr('href');
    var urlChunks = url.split('/').reverse();
    var groupLabel = urlChunks[0] + "-" + urlChunks[1];

    thisLink.attr( 'rel' , 'associated-lightbox['+groupLabel+']' );

});

Great, that takes care of the rel attribute! But we need to make one modification to node-photo_album.tpl.php to use the new group assignment (we previously used the node id). So now we have (changes in bold)

<?
if( $_GET['links-only']=='1' ){
    $urlChunks = explode( '/' , $node->path);
    $urlChunks = array_reverse( $urlChunks );
    $groupLabel = $urlChunks[0] . "-" . $urlChunks[1];
?>
<div class="remote-photo-gallery" id="<? print $groupLabel;?>-remote-photo-gallery">
    <? foreach( $node->field_gallery_images as $image ){?>
        <a href="/<? print $image['filepath'];?>" title="<? print $image['data']['title'];?>" rel="lightbox[gallery-<? print $groupLabel;?>]"></a>
    <? }?>
</div>
<? }else{?>
…
<? }?>

OK good, now we have the same group assignment on the <a> tags being pulled in. Notice one thing though...we still need $_GET['links-only'] to tell the template file to deliver a simple series of <a> tags and not the full node. So we need to add that into the script that is modifying the original photo album link (line 9):

$('.node a[href^="/photo-albums/"]').each( function(){

    var thisLink = $(this);
    var url = thisLink.attr('href');
    var urlChunks = url.split('/').reverse();
    var groupLabel = urlChunks[0] + "-" + urlChunks[1];

    thisLink.attr( 'rel' , 'associated-lightbox['+groupLabel+']' );
    thisLink.attr( 'href' , $(this).attr('href') + '?links-only=1' );

});

And finally, it's business as usual from there on out; creating the containers for the groups of <a> tags, pulling in the groups of <a> tags for each photo album and doing the final modifications to have the link launch the Lightbox slideshow. Here is the final script:

$('.node a[href^="/photo-albums/"]').each( function(){
		
    var thisLink = $(this);
    var url = thisLink.attr('href');
    var urlChunks = url.split('/').reverse();
    var groupLabel = urlChunks[0] + "-" + urlChunks[1];
	
    thisLink.attr( 'rel' , 'associated-lightbox['+groupLabel+']' );
    thisLink.attr( 'href' , $(this).attr('href') + '?links-only=1' );
	
    $('body').append( '<div id="' + groupLabel + '-lightbox-links"></div>' );
    $('#' + groupLabel + '-lightbox-links').load(url + '?links-only=1 #' + groupLabel + '-remote-photo-gallery' , function(){
        var sel = '#' + groupLabel + '-remote-photo-gallery a:first';
        var newHref = $(sel).attr('href');
        var newRel = $(sel).attr('rel');
        thisLink.attr('href',newHref);
        thisLink.attr('rel',newRel);
        Lightbox.initList();
    });

});