Navigating between secondary images in the lightbox

So I’m testing different things to see how I could use the single template, but I can’t seem to be able to make the link of the thumbnail to go to the single page. Instead it links directly to the original image. If the lightbox is activated, it opens the lightbox with the same template, if not, it bring to the original media file.

It is currently set as the gallery template, so I have the code ‘‘ in the template. If I turn off the lightbox, shouldn’t the %LINK% token bring me to the single page instead of the media file?

This is what I had understood from this comment on the catablog site: http://catablog.illproductions.com/2010/11/help-lightbox-is-not-working/#comment-794

Thank you!

Hello mbrsolution,

I was using the unmodified gallery template to make my tests…
The point 5A in your post made me realize it was just a question of using %PERMALINK% instead of %LINK%. Thank you for that hint.

And I have managed to make the permalink open in my theme’s lightbox so all is good. All I have to do now is figure out how to make the single-catablog-items.php template to show what I want 🙂

Thank you for pointing me in the right direction!

Hello,

Sorry for the late reply, but I wanted to wait until it was all done before answering so I could report what I did, just in case someone wants to do the same. Maybe there is a better way of doing it… but this worked for me :

1. Used the single-catablog-items.php option and used this in the single template :

<div id="catablog-photo-viewer">
</div>
<div id="catablog-thumb-list">
	%MAIN-IMAGE%
	%SUB-IMAGES%
</div>

2. Did not activate the plugin’s lightbox, but used the one from my theme (PrettyPhoto) by adding the necessary code (class=”prettyphoto” and ?iframe-true so the lightbox can open the single item page) in the default template:

<div class='catablog-row %CATEGORY-SLUGS%'>
	<div class="catablog-images-column">
		<a href="%PERMALINK%?iframe=true&width=100%&height=600" class="prettyPhoto catablog-image" title="%TITLE%">
		<img src="%IMAGE-THUMBNAIL%" alt="%TITLE%" />
		</a>
	</div>
		<h3 class='catablog-title'>%TITLE-LINK%</h3>
</div>

3. Used the CSS to position the thumbnails and used a bit of javascript to be able to switch from one picture to another in the larger area (photo viewer) :

<script>
jQuery(document).ready(function() {
  jQuery('#catablog-thumb-list a').click(function(evt) {
  	evt.preventDefault();
  	var imgPath = jQuery(this).attr('href');
  	var oldImage = jQuery('#catablog-photo-viewer img');
  	var newImage = jQuery('<img src="' + imgPath +'">');
  	newImage.hide();
  	jQuery('#catablog-photo-viewer').prepend(newImage);
  	newImage.fadeIn(1000);
  	oldImage.fadeOut(1000,function(){
    		jQuery(this).remove();
  	}); // end fadeout
  }); // end click
  jQuery('#catablog-thumb-list a:first').click();
});
</script>

I think that’s it… Seems to work pretty well. 🙂

Sorry, I forgot! Now it is marked as resolved 🙂

Feel free to use any of this information to create your tutorial!