smd_gallery problem

daikw · 2008-08-30 16:25:40

Hi there,

I have a slight problem with using smd gallery. I’m sure it’s a simple oversight on my part.

When the thumbs are clicked I would like them to load in place of the fullsize image to the right. Currently they are loading in a new page.

Thanks.

The Gallery in Question

photo_page form

<div id="gallery"> <txp:smd_gallery category="?title"> <txp:smd_if field="{counter}" operator="eq" value="1"> <div id="fullsize"> <txp:image id="{id}" /> <span id="caption">{title}</span> </div> </txp:smd_if> <a href="{url}" class="thumb" title="{caption}" onclick="document.getElementById('fullsize').img.src = this.href; document.getElementById('caption').value = this.title; return false;"> <txp:thumbnail id="{id}" /> </a> </txp:smd_gallery> </div>

gallery_layout form

{changed:category_title}
<a rel="lightbox" href="{url}" title="{title}">{object}</a>

Last edited by daikw (2008-08-30 16:27:15)

Bloke · 2008-08-30 21:19:50

daikw wrote:

When the thumbs are clicked I would like them to load in place of the fullsize image to the right. Currently they are loading in a new page.

Ooops, I think I may have given you bogus information before, sorry; I’ve spent too much time with jQuery and forgotten how much of a pig the DOM is to walk by hand :-)

In your photo_page form you should swap this:

onclick="document.getElementById('fullsize').img.src = this.href;

for:

onclick="document.getElementById('fullsize').childNodes[1].src = this.href;

If you have a look at how to walk the DOM it gives more insight on how to reference elements of an HTML page from javascript. Either that or seriously consider jQuery because it does all the heavy lifting for you and allows much simpler syntax to get at elements and change stuff.

P.S. That page doesn’t appear to start with an <html> tag :-)

Last edited by Bloke (2008-08-30 21:20:26)

daikw · 2008-09-09 15:32:11

Thank you so much bloke! That’s fixed up now :)

Just wondering, is there a way you can think of to fix the layout of the gallery, so that there are always three thumbnails per row, and the ‘fullsize’ image resizes freely on the right hand size? Furthermore – can the image captions also be swapped with the images? At the moment, they are ‘stuck’ and do not change on click after the first image.

The fullsize images vary in dimension, Is there a way to swap them, but allow them to retain their original pixel size?
If not, a workaround could be to fit them all to a single canvas size (e.g. 700 × 700) in Photoshop, so that they fit in neatly with your code.

Thank you for all your generous help.

Dai

daikw · 2008-09-09 17:50:49

ah… I just noticed this still doesn’t work for IE (I’m testing on version 7) is this something to do with the script and is there a workaround?

Thanks again,

Dai

Bloke · 2008-09-09 19:03:06

Yes, it won’t work in IE because the javascript still contains an error (my fault… again! Please seriously consider swapping to jQuery for any DOM manipulation like this, it’s amazing how much I’ve forgotten about the native DOM calls since jQuery came along).

With regards wrapping the thumbs in their own div, you can do that with the recently added grouptag attribute that I wrote for jstubbs a while ago. Assuming all your thumbs on each page are in one category — by default, grouptag wraps an HTML element around all thumbs in one category — you can simply tell it which tag you want to use, and its class. Like this:

<div id="gallery">
  <txp:smd_gallery category="?title" grouptag="div" groupclass="thumbwrap">
    <txp:smd_if field="{counter}" operator="eq" value="1">
      <div id="fullsize">
        <txp:image id="{id}" /><span id="caption">{title}</span>
      </div>
    </txp:smd_if>
    {grouptagstart}
    <a href="{url}" class="thumb" title="{title}"
      onclick="document.getElementById('fullsize').childNodes[1].src = this.href;
               document.getElementById('caption').firstChild.nodeValue = this.title;
               return false;">
      <txp:thumbnail id="{id}" />
    </a>
    {grouptagend}
  </txp:smd_gallery>
</div>

That will wrap:

a <div class="thumbwrap"> around just your thumbs via the {grouptagstart} / {grouptagend} tags
a <div id="fullsize"> around just your full size pic
a <div id="gallery"> arround the whole lot.

You can then make the thumbwrap a fixed width via CSS. If the fullsize images vary in dimensions you will have to set the fullsize div to a value that is the widest of all the images you have. All pics should then fit snugly inside without the div changing width. Either that or — as you suggest — make sure they’re all the same width in photoshop.

Note that I’ve also fixed the caption javascript because I gave you erroneous info last time *cough*

Does that get you any closer?

P.S. you don’t need the gallery_layout form any more since you are not using the form attribute in the smd_gallery tag; all your processing is taking place as a container between the <txp:smd_gallery> and </txp:smd_gallery> tags.

Last edited by Bloke (2008-09-09 19:06:17)

daikw · 2008-09-10 11:42:30

Thanks very much. your grouptag attribute is very cool, and makes sense to me. From what I can gather, something is not quite right; it seems to be wrapping each thumb individually, and causing an error. All the images on each gallery spread are in the same category, but I’m not sure if the thumbs are. (Is it necessary/possible to change the category of a thumbnail image – or does it automatically get assigned to the category of its fullsize counterpart?

Thanks a million,

Dai

Bloke · 2008-09-10 12:39:04

daikw wrote:

it seems to be wrapping each thumb individually, and causing an error.

Most likely because your thumbs aren’t all in the same category; though they should be in the same category as the fullsize pics if they were uploaded via the TXP admin interface and auto-generated. There’s no way to separate an automatically generated thumbnail from its full size image.

The plugin puts {grouptagstart} at each change in category so if you can organise your images and thumbs to fit this structure it makes things easier. You can, however, modify what triggers a change in grouptag by using the onchange attribute (by default it is set to ‘category’).

If you can find some other attribute of your thumbs that doesn’t change, use that instead. For example, since your images are all of the same type (jpg) and there is only one ‘gallery’ per page you could cheat and perhaps use something like ext (the file extension) which is constant. Thus onchange="ext" will only fire once; at the start and end of your group of thumbnails.

Last edited by Bloke (2008-09-10 12:39:44)

daikw · 2008-09-10 19:09:58

Thank you very much, I managed to get your {grouptagstart} working without modifying the onchange, I also have fixed the width of “gallery” and “fullsize” using CSS as you suggested.

Two problems now remain: The “fullsize” images still squash themselves to the pixel dimensions of the first image regardless of the width I set for “gallery” or “fullsize”, is there some way to allow them to ‘reset’ the dimensions of the placeholder before the swap, so they don’t resize to the dimensions of the image that came before?
Secondly, I still can’t get ithis to work in IE, I would be more than happy to change to using jQuery if it was simpler and you would be kind enough to show me what to do in this case.

Many thanks again. Dai

Last edited by daikw (2008-09-10 19:11:07)

Bloke · 2008-09-10 23:50:41

daikw wrote:

The “fullsize” images still squash themselves to the pixel dimensions of the first image

Ah yes, I see what you mean. This is an unfortunate side-effect of the onclick method that fetches the new image from the server. Your script would somehow have to read the dimensions of the image it had just loaded and resize your <img>/<div> tags accordingly. There are two easy ways to get round this:

Make all the images the same size in the first place :-)
Choose an already written jQuery image gallery that does what you want and tell smd_gallery to use it

Secondly, I still can’t get ithis to work in IE

Hmph, IE is such a pain. It should work. *shrug*

Going jQuery won’t solve your image width issues but it will at least work across browsers.

First of all make sure jquery.js is loaded via a <script> tag on your page.
Remove the onclick chunk of code from that stuff I posted above so that part of the page now reads:

<a href="{url}" class="thumb" title="{title}">
  <txp:thumbnail id="{id}" />
</a>

Then add a script block somewhere on the page (anywhere, could even be in another form):

<script type="text/javascript">
$(function() {
  $(".thumbwrap a").click(function(event) {
    event.preventDefault();
    $("#fullsize img").attr("src", $(this).attr("href"));
    $("#caption").text($(this).attr("title"));
  });
});
</script>

Although it looks more complex, it’s far neater and works across browser. Sorry but I haven’t got time to go into the code now (tired!). The jQuery.com site will help explain anything.

But I would perhaps recommend looking at the pre-packaged jQuery gallery plugins since they’ve done all the difficult stuff for you — galleria is very nice.

daikw · 2008-09-17 20:33:20

It works!! Honestly, thankyou so much you’ve been such an amazingly helpful guy.

Dai

Textpattern CMS

Textpattern CMS support forum

#1 2008-08-30 16:25:40

smd_gallery problem

#2 2008-08-30 21:19:50

Re: smd_gallery problem

#3 2008-09-09 15:32:11

Re: smd_gallery problem

#4 2008-09-09 17:50:49

Re: smd_gallery problem

#5 2008-09-09 19:03:06

Re: smd_gallery problem

#6 2008-09-10 11:42:30

Re: smd_gallery problem

#7 2008-09-10 12:39:04

Re: smd_gallery problem

#8 2008-09-10 19:09:58

Re: smd_gallery problem

#9 2008-09-10 23:50:41

Re: smd_gallery problem

#10 2008-09-17 20:33:20

Re: smd_gallery problem

Board footer