Single image that leads to image set

Pablo Apiolazza · 2011-03-14 02:35:51

Thank you very much for your input.
I managed to reproduce the same array of images but with wet_for_each_image.

The thing is that it displays at least one thumb to then be clicked and display the gallery in full size. I’m using slimbox, since Lightbox was giving me some conflicts with scrollTo.

This is almost perfect, but not what I’m trying to accomplish. As a matter of fact I want the original thumbnail image to be just a link, a static image unrelated with the full images to be displayed, since it’s like some sort of big icon.
Maybe the problem right now is not txp but js, but the thing is that all the modal view plugins work pretty much the same. I cannot find a way to associate this static link with the rest of the images, since I tried to put the same rel to them, but it’s not working, the modal opens but it’s like it doesn’t “find” any of the images.

 <a href="javascript:SlimboxIllus()" class="thumbsimg" >
	<span class="overlay01">
	  <span class="caption01">Illustrations</span>
	</span>
	<img class="thumb" src="images/Illustrations.jpg" alt="Illustrations"/>
</a>
    <a rel="lightbox" ></a>
<div id="gallery_illustration" style="display:none">
<a rel="lightbox[illustration]" href="images/9.jpg" title="Title 1"><img src="images/9t.jpg" width="697" height="195" alt="Title 1"  /></a>
<a rel="lightbox[illustration]" href="images/12.jpg" title="Title 2"><img src="images/12t.jpg" width="697" height="195" alt="Title 2"  /></a>
<a rel="lightbox[illustration]" href="images/14.jpg" title="Title 3"> <img src="images/14t.jpg" width="697" height="195" alt="Title 3"  /></a>
</div>
</div>

In the previous there’s a js function instead of the rel, since I tried with the rel but it wasn’t working. Sadtly the function, that is supposed to be jquery and slimbox, it’s not working either.

function SlimboxIllus()
{
jQuery("#gallery_illustration").slimbox();
}

What am I missing here? Maybe there’s a txp way to solve it instead of using a js function. Or maybe it’s a silly error, which can be since I’m a noob.

(added bc. for better code display. -Els)

Last edited by els (2011-03-14 07:55:48)

jakob · 2011-03-14 09:31:26

What am I missing here?

You have no first image within your gallery_illustration div to click on to trigger the first modal box. But your slimbox js specifies exactly this div.

Perhaps TNT’s suggestion above just needs extending:

<div id="gallery_illustration">
   <txp:images category='<txp:custom_field name="photo-category" />' break="" limit="1">
      <a href="<txp:image_url />" title="<txp:image_info />" rel="lightbox[<txp:custom_field name="photo-category" />]"><txp:smd_thumbnail type="430" /></a>
   </txp:images>
   <span style="display:none;">
   <txp:images category='<txp:custom_field name="photo-category" />' break="" offset="1" limit="999">
      <a href="<txp:image_url />" title="<txp:image_info />" rel="lightbox[<txp:custom_field name="photo-category" />]"></a>
   </txp:images>
   </span>
</div>

in other words, show the first link and thumbnail image properly (with limit="1"), then all the remaining links (with offset="1" limit="999") – no need to show the actual thumbnails – in a hidden span.

Last edited by jakob (2011-03-14 10:45:00)

Bloke · 2011-03-14 10:01:00

Pablo Apiolazza wrote:

I want the original thumbnail image to be just a link, a static image unrelated with the full images to be displayed, since it’s like some sort of big icon.

As a full JS alternative, how about this approach to build the array for you and manually display the icon image. You could easily substitute wet_for_each_image or even smd_gallery if you prefer, but the core image tags do a fine job as long as you don’t want custom sorting of the gallery:

<a href="#" id="slimbox_start"><txp:thumbnail name="icon_image_to_click.jpg" /></a>

<script type="text/javascript">
   var images = [];
   <txp:images category="cat-2">
      img = ["<txp:image_url />", "<txp:image_info />"];
      images.push(img);
   </txp:images>
   jQuery(function() {
      jQuery("#slimbox_start").click(function() {
         jQuery.slimbox(images, 0);
      });
   });
</script>

Load jQuery/slimbox js/css as normal and you should be good to go. If doing this directly in an article, switch off Textile processing or things get ugly.

EDIT: you’ll need to be more clever if you want multiple galleries per page by perhaps employing the rel= attribute, or building different images arrays for each gallery and triggering them separately from your anchors. This is where an smd_gallery approach would benefit because you could create all the arrays up-front — perhaps using smd_gallery’s onchange facility to switch between galleries, although that may not be necessary because things like image_{category} = []; may allow you to create one per category and assign them on the fly as each image is supplied from the plugin.

Last edited by Bloke (2011-03-14 10:11:12)

masa · 2011-04-02 19:22:43

Bloke wrote:

You can upload your pictures to a single image category and put that category name in either the article-images field or a custom field of your choosing.

The article-images field accepts category names?? Is that a recent addition or has it been around for a long time?

Lately I haven’t been checking the forum as much as I used to do, so I might have missed that.

Bloke · 2011-04-02 21:34:02

masa wrote:

The article-images field accepts category names??

It does if you use smd_gallery :-) The core image tags still work with IDs/names only in that field, although if you are not going to use <txp:article_image /> there’s nothing to stop you abusing the field for the core tags too.

masa · 2011-04-03 21:07:58

Bloke wrote:

It does if you use smd_gallery :-)

I just knew smd_magic had to be involved :-)

Thanks!

Textpattern CMS

Textpattern CMS support forum

#13 2011-03-14 02:35:51

Re: Single image that leads to image set

#14 2011-03-14 09:31:26

Re: Single image that leads to image set

#15 2011-03-14 10:01:00

Re: Single image that leads to image set

#16 2011-04-02 19:22:43

Re: Single image that leads to image set

#17 2011-04-02 21:34:02

Re: Single image that leads to image set

#18 2011-04-03 21:07:58

Re: Single image that leads to image set

Board footer