smd_gallery: super-flexible gallery generator

pafruu · 2011-10-04 13:52:25

Yep, me again,

I am trying to create a gallery where on the right we have a list of thumbnail listed from the same category. When clicking on the thumbnail, the placeholder on the left shows us a bigger image of that thumbnail. And if you want to see a full size image, click on the placeholder and you get the lightbox effect with a full view image.

Right now what I have is the article image as placeholder, a list of thumbnail where when you click on them, the lightbox effect shows up.

Here is the code

This is the article form named galle :

<a href="{url}" onmousedown="document.getElementById('fullsize').src = this.href; return false;" rel="lightbox-smd"> 
<img src="{thumburl}" alt="{alt}" />
</a>

and the ouput form that calls to it:

<div style="float:left;padding-right:10px;"><txp:article_image html_id="fullsize" thumbnail="0" width="480" height="360" /></div><txp:smd_gallery category='<txp:custom_field name="image gallery" />' form="galle" break="div" breakclass="galPict" wraptag="div" class="galList" />

how can I achieve the effect that I want?

edit:

I actually found a way to get the thumbnails to show in placeholder after a click with this:

<img src="{url}" alt="{alt}" onmousedown="document.getElementById('fullsize').src = this.src;" width="100" height="80">

now the only thing that is left for me to figure out is to have the lightbox show after clicking on the placeholder with the respective image

Last edited by pafruu (2011-10-04 18:03:33)

pafruu · 2011-10-06 14:38:57

ok After a lot of research I kinda made it work.

Here is how:

first in the header part of the page I put this code:

<script type="text/javascript">
 function swaphref(imagehref) {
var image = document.getElementById('imager');
image.setAttribute('href', image.src);
document.getElementById('imagehref').setAttribute('href', image.src);
//window.alert(document.getElementById('imager').src);
//window.alert(document.getElementById('imagehref').href);
}
</script>

then in my output form I type in this code:

<div style="float:left;padding-right:10px"><txp:smd_gallery limit="1" id="?article_image" category='<txp:custom_field name="image gallery" />'><a href="#" id="imagehref"     onclick="swaphref(this)"  rel="lightbox-smd" ><txp:article_image thumbnail="0" width="480" height="360" html_id="imager" /></a></txp:smd_gallery></div>
<txp:smd_gallery category='<txp:custom_field name="image gallery" />' form="galle" break="div" breakclass="galPict" wraptag="div" class="galList" />

works like a charm the only thing that I need to figure out now is how to make the fullsize images scroll from one onto the other with the next and previous links.

Any ideas for that?

Last edited by pafruu (2011-10-06 14:48:32)

Gallex · 2011-11-24 13:19:11

can’t figure out why it recreats the albums after adding some new images into existing album? the page
i think, i need to change something in a onchange attribute, but what? could anybody help me?

my page:

<txp:smd_gallery category="!header, !kuelavilla-header, !site-design, !content" sort="date desc" thumblimit="5" thumbsize=" ,60" onchange="category_title" onchangewraptag="h3" grouptag="div" groupclass="pildid">
{grouptagstart}
{onchange:category_title}
<a rel="lightbox-{category}" href="{url}" title="{caption}">
{object}
</a>
{grouptagend}
</txp:smd_gallery>

Last edited by Gallex (2011-11-24 14:38:10)

jakob · 2011-11-24 17:45:39

only had a quick look so could be wrong, but take a look at your sort attribute: it looks like you need to sort by category first, then date.

Gallex · 2011-11-25 08:07:14

that was it! thank you jakob!

pafruu · 2011-11-25 18:52:11

hello guys,

great plugin as always although I am at a loss here.

I am showing my thumbnail for the gallery and when clicked the java is happening for height but not for the width of the image. As seen here:

http://armorfarm.com/diorama_products/9/forest-litter

At first, I commented out some javascript that I thought would be conflicting with the script but that wasnt it, then I checked the css files to see if anything was specified there, again nothing.

What am I missing?

forgot to mention that when I click on the next image link, then the image is properly displayed.

Last edited by pafruu (2011-11-25 19:36:20)

Gallex · 2011-12-07 12:54:54

right now my albums launch from the single thumbnail, but is it possible to launch albums from the album’s title (from h6 in my example page)?

my code:

<txp:smd_gallery category="!header, !kuelavilla-header, !site-design, !content" sort="category date desc" thumblimit="1" thumbsize="70" onchange="category_title" onchangewraptag="h6" grouptag="div" groupclass="pildid">
{grouptagstart}
{onchange:category_title}
<a rel="lightbox-{category}" href="{url}" title="{caption}">
{object}
</a>
{grouptagend}
</txp:smd_gallery>

here is my example gallery

i would like to create album’s list without any thumbnails there, just album’s title list

Bloke · 2011-12-07 13:12:34

Gallex wrote:

is it possible to launch albums from the album’s title (from h6 in my example page)?

~~Investigate smd_gallery’s text attribute and put the contents of the h6 in there. That should do what you want.~~

EDIT: scratch that, use objectform instead and put the h6 inside that nominated form. I missed the fact you’re launching more than one gallery.

Last edited by Bloke (2011-12-07 13:15:23)

Gallex · 2011-12-07 13:50:26

something like this?

<txp:smd_gallery category="!header, !kuelavilla-header, !site-design, !content" sort="category date desc" thumblimit="1" thumbsize="70" onchange="category_title" onchangewraptag="h6" grouptag="div" groupclass="pildid" objectform="title">
{grouptagstart}
{onchange:category_title}
<a rel="lightbox-{category}" href="{url}" title="{caption}">
{object}
</a>
{grouptagend}
</txp:smd_gallery>

form ‘title’ :

<a>{category_title}</a>

Bloke · 2011-12-07 13:54:39

Gallex wrote:

something like this?

Yeah. I was thinking more:

<h6>{category_title}</h6>

since you’ve already got the anchor around the outside of the {object} but in principle yes I think that’ll do it.

Gallex · 2011-12-08 09:00:27

great!

one little thing: i would like to sort the albums by category name, not by date like right now.

this sort="category name desc" not working

Bloke · 2011-12-08 21:16:06

Gallex wrote:

sort="category name desc" not working

You need to comma-separate columns for sorting, e.g.:

sort="category, name desc"

would sort by (ascending) category then descending name. Whereas:

sort="category desc, name desc"

Would sort both in descending order.

frickinmuck · 2011-12-20 21:13:03

I’m creating a gallery system that enables the client to easily drag and drop photos to sort them. To create a new album, all they need to do is create an article, then add and arrange images using bot_image_upload. On the main gallery page, the articles are shown, but appear as albums launched by a single image using smd_gallery and smd_slimbox. The user just clicks on the thumbnail for that article and slimbox opens up with the images. That way they can browse each album without leaving the page.

Here’s my code:

<txp:smd_gallery id="?article_image"
     form="gallery" thumblimit="1"  />
</txp:if_article_image>

and the form:

<a rel="lightbox-smd" href="{url}"
     title="{title}">
{object}
</a>

Works brilliantly (thanks once again, Stef, for your excellent plugins!). The only thing I’d like to be able to do that I haven’t yet figured out is, I’d like to limit each slimbox gallery to the images for that particular article. Right now each album opens with the images for the individual article, but next and previous takes the user into images for the other articles on the page.

maniqui · 2011-12-20 21:21:38

^^ It’s usually a matter of “scoping” the rel attribute.

Something like this should work:

<a rel="lightbox-smd-<txp:article_id />" href="{url}"
     title="{title}">
{object}
</a>

This way, the slimbox script “knows” which images are related to each other.

frickinmuck · 2011-12-20 21:55:26

Thanks, Julián – you’re the best. That totally worked. Much appreciated!

Textpattern CMS

Textpattern CMS support forum

#856 2011-10-04 13:52:25

Re: smd_gallery: super-flexible gallery generator

#857 2011-10-06 14:38:57

Re: smd_gallery: super-flexible gallery generator

#858 2011-11-24 13:19:11

Re: smd_gallery: super-flexible gallery generator

#859 2011-11-24 17:45:39

Re: smd_gallery: super-flexible gallery generator

#860 2011-11-25 08:07:14

Re: smd_gallery: super-flexible gallery generator

#861 2011-11-25 18:52:11

Re: smd_gallery: super-flexible gallery generator

#862 2011-12-07 12:54:54

Re: smd_gallery: super-flexible gallery generator

#863 2011-12-07 13:12:34

Re: smd_gallery: super-flexible gallery generator

#864 2011-12-07 13:50:26

Re: smd_gallery: super-flexible gallery generator

#865 2011-12-07 13:54:39

Re: smd_gallery: super-flexible gallery generator

#866 2011-12-08 09:00:27

Re: smd_gallery: super-flexible gallery generator

#867 2011-12-08 21:16:06

Re: smd_gallery: super-flexible gallery generator

#868 2011-12-20 21:13:03

Re: smd_gallery: super-flexible gallery generator

#869 2011-12-20 21:21:38

Re: smd_gallery: super-flexible gallery generator

#870 2011-12-20 21:55:26

Re: smd_gallery: super-flexible gallery generator

Board footer