Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-09-20 05:48:01
- ss
- Member
- Registered: 2004-03-31
- Posts: 20
Inline thumbnail viewer
I hope the title is descriptive enough and correct to describe what I would like to do.
First off, I have not worked with Textpattern for a while but am helping a friend with his portfolio website, and please bare with me as I’m finding my way around again.
I would like to learn how to have article images appear inline on the same page when the respective thumbnails are clicked.
Kemie has shown me how she uses the upm_image plugin and a javascript, however instead of thumbnails, numbered links are used – http://malsup.com/jquery/cycle/
She also sent me a link to Galleria which seems perfect but I’m not sure how to use article images in Textpattern to generate it.
Has anyone here used Galleria before, or something similar? If not, what is the best way to achieve a gallery like this?
Thanks so much!
Offline
#2 2008-09-20 06:23:49
- szac
- Member
- From: Detroit-ish
- Registered: 2004-09-18
- Posts: 50
Re: Inline thumbnail viewer
Here’s a plugin-free, javascript-free, kinda hacky, article based, bare bones way:
create a section called gallery, then create two article forms: form1 will have <li><txp:permlink><txp:article_image thumb="1" /></txp:permlink></li> that’s your thumbnails and form2 will have the large article image in it like this <txp:article_image /> as your full image. Of course you’ll have access to all other fragments of the post like title, body, excerpt, custom fields, posted date, category, etc..
Now create a page called gallery_page, make sure that your gallery section is using it and add something like this to it:
<!-- the thumbs -->
<ul><txp:article_custom section="gallery" form="form1" /></ul>
<!-- the big image -->
<txp:article form="form2" />Offline
Re: Inline thumbnail viewer
Hi ss. Squared Eye has recently designed a site that has just gone “live” and uses Galleria. You can see it in action here. If you would like information on how this was achieved please email me as I don’t think it would be appropriate to make this thread any longer than is necessary. You’re bound to ask a few questions. ;)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Inline thumbnail viewer
Hi Stuart, a quick run down of how the implementation was made would be of interest to me – perhaps others too.
Last edited by jstubbs (2008-09-20 14:38:33)
Offline
Re: Inline thumbnail viewer
from what I understand, Galleria requires an unordered list of images, so you could use upm_image to output a series of image with a wraptag of ul and a break of li. Then you would just call the galleria javascript to transform that list into the thumb gallery.
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
#6 2008-09-20 17:53:54
- ss
- Member
- Registered: 2004-03-31
- Posts: 20
Re: Inline thumbnail viewer
thanks for your answers, everyone! i just got back home after a long long day (it’s almost 2am now) so i have to read up everything and reply to you all in the morning.
again, thanks so much!
Last edited by ss (2008-09-20 18:03:53)
Offline
Re: Inline thumbnail viewer
Jeremy Keith’s ALA article on unobtrusive javascript details making a gallery that functions in the same way and is nice and clean. I’ve used it a few times now.
BTW: for a numbered solution you can also use rvm_counter to auto number.
Finally, I think hak_article_image has a mode that works this way and can also work without javascript by using a get variable in the url.
TXP Builders – finely-crafted code, design and txp
Offline
Re: Inline thumbnail viewer
ss,
I can’t recommend the jquery.cycle plugin kemie mentioned enough.
You can use a ton of transitions, and there’s a lot of documentation.
Here’s a site I did recently – I used upm_image and jquery.cycle to accomplish what you’re after.
Here’s the rundown on how to do it with TXP and jQuery:
In the <head> of your page:
<script src=”/includes/jquery-1.2.6.js” type=“text/javascript”></script>
<script src=”/includes/jquery.cycle.all.js” type=“text/javascript”></script>
<script type=“text/javascript”>
//<![CDATA[
$(document).ready(function() {
// redefine Cycle’s updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
$(pager).find(‘li’).removeClass(‘activeLI’)
.filter(‘li:eq(‘currSlideIndex’)’).addClass(‘activeLI’);
};
$(‘.article-image’).cycle({
fx: ‘fade’,
speed: ‘slow’,
timeout: 8000,
pager: ‘.thumbs’,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return ‘.thumbs li:eq(’ + idx + ‘) a’;
return false;
}
});
});
//]]>
</script>
// Place this in your page where you want the full image
<div class="article-image">
<txp:upm_article_image limit="9" form="article-images" />
</div>
// Place this in your page where you want the thumbs
<ul class="thumbs">
<txp:upm_article_image limit="9" form="article-thumbs" />
</ul>
//article-images Form
<div><img src="<txp:upm_img_full_url />" alt="<txp:upm_img_alt />" /></div>
//article-thumbs Form
<li><a href="#"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />"></a></li>
Last edited by renobird (2008-10-26 15:12:52)
Offline
Re: Inline thumbnail viewer
Well for those who want to know more about the Galleria installation here goes.
- Upload the Galleria javascript file as per the included instructions. You will need a call to this in the
<head>section of any page template that is to use it. - There is also a block of javascript that needs to go directly into the
<head>section of any page template that is to use it which contains various “options” that you can switch on and off depending on your requirements. I’ll come back to this later as there is something else to add here. - Install the Galleria CSS to the “Style” tab and include a call to this in the
<head>section of any page template that is to use it. I’ve deliberately kept this as a separate file. I do use Ruud’s rvm_css plug-in though this isn’t necessary. - Install Mary’s upm_image plug-in and activate it.
- You need to create a form to be used by the articles using Galleria. Within that form, where ever you want the images to appear, you place a call to Mary’s plug-in something like
<txp:upm_article_image wraptag="ul" class="galleria" break="li" show_alt="yes" show_title="yes" /> - If you want the next/prev links you will also need the following, probably underneath the plug-in call
<a href="#" onclick="$.galleria.prev(); return false;">prev</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a>. I’ve simply placed that inside “p” tags with a class so that I can aim the CSS at it. - Now for each article use a comma-separated list in the “Article image” box under “Advanced Options” of the images you want to appear in Galleria.
- By default Galleria will only display the thumbnails (these are auto-generated) when the page loads so if you want the first image to display automatically you need to go to that block of javascript above and add
$(".galleria li:first").addClass('active');right before the last set of closing brackets. - Also in that javascript block set
insert : undefined,as this matches with the Galleria CSS you installed earlier. - Now you need to work on the CSS to make it look the way you want it.
- To create the links within the article you need to use something similar to
<a href="javascript:$.galleria.activate('http://your-site.com/images/50.jpg')">link text</a>where the image “id” is the image you want displayed. Of course it does have to be an image that is contained in the list for that article. Don’t forget to replace “your-site.com”. - If you check out the DevKick site you can find loads of different image display methods other than Galleria using jQuery, Mootools and Javascript along with a load of other stuff. It’s one of my Bookmarks.
Last edited by thebombsite (2008-09-21 12:10:17)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Inline thumbnail viewer
Stuart,
Thanks for the rundown – I’ll give that method a shot and see how the 2 compare. I’ve always used the “cycle” plugin with TXP – but Galleria looks pretty easy to implement as well. One question: Can you place the thumbs anywhere you want, or does Galleria automatically append a container for them? I guess I could just read the documentation and find out. : )
DevKick has been silent for a while – I wonder what’s going on there? There was so much activity at first.
I think both methods would be good additions to the how to forum. – It’s a shame we can’t get that re-opened. ; )
—
Tom
Offline
Re: Inline thumbnail viewer
Yes I was thinking it should go into the “How to” forum with a meaningful title. As this isn’t strictly a TXP thing I was also thinking it wouldn’t be appropriate to move it to the wiki at a later date either which furthers my point about keeping the “How to” forum open.
But anyway, Galleria does allocate a separate container for the main image (and caption if you show it) but it is created on page load and is always placed immediately before the thumbs which are in an unordered list block. This does give plenty of leeway for styling but I don’t think you can have the 2 containers on different parts of the page as you can’t place anything between them unless maybe you use “absolute positioning”.
Last edited by thebombsite (2008-09-22 20:35:53)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Inline thumbnail viewer
I’m also using galleria on a site but with smd_gallery instead of upm_image. My images are not article related though.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline