Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: How to display one thumbnail and show several images in slide?
I understand the use of smd_macro.
But you are still using JQuery to hide the other thumbnails, which are downloaded anyway by the browser. As Oleg already stated: on a slower connection this is a waste of time.
When you use smd_gallery, you can output only one thumbnail, which links to the whole gallery. No hidden thumbnails, no useless downloads.
(Although when a visitor uses a non-js-browser, only that one thumbnail is displayed.)
…Prrrrrrrr…
Offline
Re: How to display one thumbnail and show several images in slide?
What about
<txp:images id="{img_id}" category="{cat}" wraptag="ul" break="li" class="lightbox-one" sort="rand()" label="{titel}" labeltag="h6">
<a href="<txp:image_url />" class="fancybox" rel="{gallery}">
<txp:if_variable name="hide">
<noscript><txp:smd_thumbnail type="thumb" /></noscript>
<txp:else />
<txp:smd_thumbnail type="thumb" />
<txp:variable name="hide" value="1" />
</txp:if_variable>
</a>
</txp:images>No css neither js needed anymore.
Edit: and js-enabled browser shouldn’t load unnecessary thumbnails.
Last edited by etc (2012-11-21 14:18:36)
Offline
Re: How to display one thumbnail and show several images in slide?
Oleg … that’s nice … it works so … applause … :)
But … can you explain to a non coder what happens here precisely?
Last edited by RedFox (2012-11-21 15:18:42)
Offline
Re: How to display one thumbnail and show several images in slide?
Nothing harmful. :) <txp:variable name="hide" /> is just a flag to indicate the first passage. It is set only after the first run, so the first thumbnail is not wrapped in <noscript>, but the next ones are. We get something like
<img />
<noscript><img /></noscript>
...
<noscript><img /></noscript><noscript> sections are processed only by js-disabled browsers, so even if <img /> links are there, the images themselves are downloaded only by js-disabled browsers, at least I hope so.
Offline
Re: How to display one thumbnail and show several images in slide?
Once upon a time (see some posts above) Oleg made this piece of code (module):
<txp:images id="{img_id}" category="{cat}" wraptag="ul" break="li" class="lightbox" sort="rand()" label="{titel}" labeltag="h6">
<a href="<txp:image_url />" class="fancybox" rel="{gallery}">
<txp:if_variable name="hide">
<noscript><txp:smd_thumbnail type="small" /></noscript>
<txp:else />
<txp:smd_thumbnail type="small" />
<txp:variable name="hide" value="1" />
</txp:if_variable>
</a>
</txp:images>It has to start a fancybox gallery and it does. As far as I understand the docs of Fancybox it would be possible to show more than one gallery on the same page. The <a> has to have a class="fancybox" and a rel="{gallery} … which it has as you can see.
The fancybox module (in this case):
<!-- fancyBox -->
<script type="text/javascript" src="<txp:site_url />fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="<txp:site_url />fancybox/jquery.fancybox.css" media="screen" />
<!-- When working, put this script at the bottom before the body closing tag! -->
<script type="text/javascript">
$(document).ready(function() {
// change overlay color
$(".fancybox")
.fancybox({
padding : 10,
helpers : {
title : null,
overlay : {
css : {
'background' : 'rgba(0,0,0,0.8)'
}
}
}
});
});
</script>The tag for one gallery which I’m using in an article (using smd_macro):
<txp:lightbox_one_small id="24,31" rel="kostuumsa" label="KostuumsA" />… and as I said it’s working
But two tags:
<txp:lightbox_one_small id="24,31" rel="kostuumsa" label="KostuumsA" />
<txp:lightbox_one_small id="25,32" rel="kostuumsb" label="KostuumsB" />… doesn’t.
In the sourcecode you can see that the script is cancelling out not only id=31 but also 25 and 32 … what has to be done here?
Can it be done?
Last edited by RedFox (2013-01-16 11:42:02)
Offline
Re: How to display one thumbnail and show several images in slide?
Oleg … I’ve changed the snippet according to your proposal (value):
<txp:images id="{img_id}" category="{cat}" wraptag="ul" break="li" class="lightbox" sort="rand()" label="{titel}" labeltag="h6">
<a href="<txp:image_url />" class="fancybox" rel="{gallery}">
<txp:if_variable name="hide" value="1">
<noscript><txp:smd_thumbnail type="small" /></noscript>
<txp:else />
<txp:smd_thumbnail type="small" />
<txp:variable name="hide" value="0" />
</txp:if_variable>
</a>
</txp:images>… makes the two galleries visible … :)
But … I want only one thumbnail of each gallery to be rendered. Need still some help here.
Last edited by RedFox (2013-01-16 14:51:32)
Offline
Re: How to display one thumbnail and show several images in slide?
Joop, I think it should be
<txp:images id="{img_id}" category="{cat}" wraptag="ul" break="li" class="lightbox" sort="rand()" label="{titel}" labeltag="h6">
<a href="<txp:image_url />" class="fancybox" rel="{gallery}">
<txp:if_variable name="hide" value="1">
<noscript><txp:smd_thumbnail type="small" /></noscript>
<txp:else />
<txp:smd_thumbnail type="small" />
<txp:variable name="hide" value="1" />
</txp:if_variable>
</a>
</txp:images>And then
<txp:variable name="hide" value="0" />
<txp:lightbox_one_small id="24,31" rel="kostuumsa" label="KostuumsA" />
<txp:variable name="hide" value="0" />
<txp:lightbox_one_small id="25,32" rel="kostuumsb" label="KostuumsB" />Offline
Re: How to display one thumbnail and show several images in slide?
Oleg … :) … it even works within (smd_macro):
<txp:variable name="hide" value="0" />
<txp:images id="{img_id}" category="{cat}" wraptag="ul" break="li" class="lightbox" sort="rand()" label="{titel}" labeltag="h6">
<a href="<txp:image_url />" class="fancybox" rel="{gallery}">
<txp:if_variable name="hide" value="1">
<noscript><txp:smd_thumbnail type="small" /></noscript>
<txp:else />
<txp:smd_thumbnail type="small" />
<txp:variable name="hide" value="1" />
</txp:if_variable>
</a>
</txp:images>Clients hate tagsoup … so <txp:lightbox_one_small id="24,31" rel="kostuumsa" label="KostuumsA" /> is already a whole lot of stuff to digest.
BTW … I still don’t grasp everything (variables), but to my gutsfeeling, and don’t take this personal please, everything seems a little bit complicated and overdone. I don’t know if there is another way to accomplish what I want but maybe I’ll have to look if smd_galleries isn’t ‘better’ suited for this kind of codepushing.
Offline
Re: How to display one thumbnail and show several images in slide?
Oleg, it’s amazing … with your tag I can do all kind of smart tricks … all on one page > claraelders.nl/txpnew/fotografie/theater … :)) … thanks encore!
Last edited by RedFox (2013-01-17 21:06:04)
Offline
Re: How to display one thumbnail and show several images in slide?
It’s your tag, Joop, mine would use etc_query! :) Very nice, glad it works.
Offline
Re: How to display one thumbnail and show several images in slide?
RedFox wrote:
Oleg, it’s amazing … with your tag I can do all kind of smart tricks … all on one page > claraelders.nl/txpnew/fotografie/theater … :)) … thanks encore!
Hi Joop
there are a lot of <txp:lightbox_one_small tags visible on the front end of that page.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: How to display one thumbnail and show several images in slide?
colak wrote:
there are a lot of
<txp:lightbox_one_smalltags visible on the front end of that page.
Yes … it’s a page filled with tag experiments … and at the same time the page can be used as a tutorial for my client… ;-)
Last edited by RedFox (2013-01-18 06:39:09)
Offline