Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
article with 3 thumbs and 1 full image
Good morning,
I posted yesterday a similar question at http://forum.textpattern.com/viewtopic.php?id=5176&p=43 but maybe this is a better place, one never knows :-)
I got my layout over here: http://www.carelse.com/images/thumb_gallery_question_screen_carelse.png
what I like to achieve and it should be easy but I just don’t get it…
My projects have text+ 3 images max (+ caption)
I display image web-1a as my default image
thumbs are web-1a web-2a and web-3a
When I click on web-2a I like default full image web-1a to be replaced with full image web-2a
the same for web 3-a
The idea is to keep the text the same and only change the caption to provide a little extra information on the image. The caption text is not in the above layout yet.
Any pointers are welcome. My head is still with expressionengine tags and logic so bear with me :-)
Jeroen
Time to volunteer? Come and join us at a great project which is going to be opensource: https://www.caloom.com
Offline
Re: article with 3 thumbs and 1 full image
Although I think you’ll be able to achieve it with rss_thumbpop I don’t think it’s the simplest way to go. You can probably do something like this with the built in tags <txp:image_index/> and <txp:image_display/>. You can present the 3 thumbnails and each time you click one it’ll refresh the page and grab the full size image of the corresponding clicked thumb. It is limited to working on a landing page though (not inside an article).
If you want to go beyond that you’ll need a plugin. I could of course recommend my own plugin smd_gallery but if you’re newish to TXP it’ll probably scare you away! You might be better off with one of the others, such as soo_image, upm_image, or wet_for_each_image.
Hope that helps.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: article with 3 thumbs and 1 full image
Thanks for the swift reply. I will take a look at the various plugins and hope to find something that suits my needs. I thought initially to use a plugin but couldn’t find the right examples. To make a plugin myself is too much too ask :-D There should be some ajax way of doing this…more searching.
If I have found a solution I post it.
Jeroen
Time to volunteer? Come and join us at a great project which is going to be opensource: https://www.caloom.com
Offline
Re: article with 3 thumbs and 1 full image
Try a jquery solution like gallerific or galleria. Both those jquery solutions give you in-page image switching based on thumbnails and you can dumb them down to what you need and adapt their CSS as you wish. The markup is also pretty straightforward too. If you play around a bit and read up on the options you can achieve quite a lot with both of those.
If you upload the images to txp via the back-end, you can give each image a caption of its own. You then plug the image ID numbers for your three images into the article image field (comma-separated e.g. 1,4,5,8) of your project article and use one of the plugins Bloke suggested in your project article form to output the markup.
Here are two tutorials, the first with galleria and the second using gallerific.
If you’d rather not use a jquery/javascript-based solution, try hak_article_image which reloads the page each time but achieves the same without javascript.
TXP Builders – finely-crafted code, design and txp
Offline
Re: article with 3 thumbs and 1 full image
There is also a Galleriffic tutorial on TXP Tips.
Offline
Re: article with 3 thumbs and 1 full image
Hello Jeroen
Jakob’s advice to use Galleriffic or Galleria is spot on. I used the latter on a site to make the image displays like the one here which seems similar in concept to what you want to achieve, no page refreshes to change images and so on. It is straightforward to position main images, thumbnails and captions using CSS in Galleria.; the JS doesn’t intrude into that.
I used the Galleria tutorial on TXP Tips for the most part but opted to use txp:soo_image in place of txp:upm_image for a reason I can’t quite remember.
Last edited by joebaich (2010-04-17 15:08:36)
Offline
Re: article with 3 thumbs and 1 full image
thanks Jakob, Jonathan and Joe. My Gallerific experiment is halfway but stuck. The thumbs load, the css seems to work as well but no display of full image when I click on one of the thumbs. Source in rendered file shows empty divs and I suspect there is the problem (and still cant use textile to style the code below):
<!-- center -->
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a href="http://localhost:8888/txp/images/17.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/17t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
<li><a href="http://localhost:8888/txp/images/18.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/18t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
<li><a href="http://localhost:8888/txp/images/19.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/19t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
</ul>
</div>
<div id="content">
<div id="gallery" class="content">
<div id="slideshow" class="slideshow"></div>
<div id="controls"></div>
<div id="caption" class="embox"></div>
</div>
</div>Added bc. -Gocom
p. thanks Cocom, now I see how you did this :-) I used “@code@”, double wrong
Last edited by JeroenC (2010-04-17 18:32:21)
Time to volunteer? Come and join us at a great project which is going to be opensource: https://www.caloom.com
Offline
Re: article with 3 thumbs and 1 full image
Can you post your complete page source (and preferably tag trace too) and JavaScript implemention. The HTML markup is nice and all, but it won’t tell us much (actually nothing).
JeroenC wrote:
thanks Cocom, now I see how you did this :-) I used “@code@”, double wrong
No problem :-) There is small Code&Textile FAQ here and small editor. Those might come handy.
Last edited by Gocom (2010-04-17 18:36:51)
Offline
Re: article with 3 thumbs and 1 full image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carelse: Jeroen</title>
<link rel="home" href="http://localhost:8888/txp/" />
<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="http://localhost:8888/txp/atom/?section=jeroen" />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="http://localhost:8888/txp/rss/?section=jeroen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost:8888/txp/css.php?n=default" />
<script type="text/javascript" src="/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/files/jquery.galleriffic.js"></script>
<script type="text/javascript" src="http://localhost:8888/txp/index.php?js=upm_image"></script>
</head>
<body id="jeroen">
<!-- accessibility -->
<div id="accessibility">
<ul>
<li><a href="#content">Go to content</a></li>
<li><a href="#sidebar-1">Go to navigation</a></li>
<li><a href="#sidebar-2">Go to search</a></li>
</ul>
</div>
<div class="container">
<!-- head -->
<div id="head">
<h1>Thumbnail Gallery</h1>
</div>
<!-- center -->
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a href="http://localhost:8888/txp/images/17.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/17t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
<li><a href="http://localhost:8888/txp/images/18.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/18t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
<li><a href="http://localhost:8888/txp/images/19.jpg" title="" class="thumb"><img src="http://localhost:8888/txp/images/19t.jpg" alt="" /></a>
<div>
<div> </div>
<div></div>
</div>
</li>
</ul>
</div>
<div id="content">
<div id="gallery" class="content">
<div id="slideshow" class="slideshow"></div>
<div id="controls"></div>
<div id="caption" class="embox"></div>
</div>
</div>
<!-- footer -->
<div id="foot"> </div>
</div>
<script type="text/javascript">
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery').galleriffic('#thumbs', {
delay: 2000,
numThumbs: 3,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#caption').fadeOut('fast');
$('#slideshow').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow, #caption').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs ul.thumbs').fadeIn('fast');
}
});
});
</script>
</body>
</html>
<!-- Runtime: 0.0221 -->
<!-- Query time: 0.007128 -->
<!-- Queries: 15 -->
<!-- Memory: 3155Kb, <txp:upm_img_caption /> -->
<!-- txp tag trace:
[SQL (0.00338888168335): select name, data from txp_lang where lang='en-gb' AND ( event='public' OR event='common')]
[SQL (0.00114107131958): select name, code, version from txp_plugin where status = 1 AND type IN (0,1) order by load_order]
[SQL (0.000230073928833): select name,code,version from txp_plugin where status = 1 AND name='smd_lib']
[SQL (0.00012993812561): select name from txp_section where `name` like 'jeroen' limit 1]
[SQL (0.000118970870972): select page, css from txp_section where name = 'jeroen' limit 1]
[SQL (0.000185012817383): select host from txp_log where ip='::1' limit 1]
[SQL (0.000176906585693): insert into txp_log set `time`=now(),page='/txp/jeroen/',ip='::1',host='::1',refer='',status='200',method='GET']
[SQL (0.000125885009766): select user_html from txp_page where name='gallery']
[Page: gallery]
<txp:page_title />
[SQL (0.000110864639282): select title from txp_section where name='jeroen']
<txp:site_url />
<txp:feed_link flavor="atom" format="link" label="Atom" />
<txp:feed_link flavor="rss" format="link" label="RSS" />
<txp:css format="link" />
<txp:rsd />
<txp:if_section name="">
[<txp:if_section name="">: false]
<txp:section />
</txp:if_section>
<txp:text item="go_content" />
<txp:text item="go_nav" />
<txp:text item="go_search" />
<txp:article listform="gallery" form="gallery" sort="Posted asc" limit="1" />
[SQL (0.000277042388916): select count(*) from textpattern where 1=1 and Status = 4 and Posted <= now() and (now() <= Expires or Expires = '0000-00-00 00:00:00') and Section IN ('jeroen')]
[SQL (0.000380039215088): select *, unix_timestamp(Posted) as uPosted, unix_timestamp(Expires) as uExpires, unix_timestamp(LastMod) as uLastMod from textpattern where 1=1 and Status = 4 and Posted <= now() and (now() <= Expires or Expires = '0000-00-00 00:00:00') and Section IN ('jeroen') order by Posted asc limit 0, 1]
[article 2]
[SQL (0.000116109848022): select Form from txp_form where name='gallery']
[Form: gallery]
<txp:upm_article_image form="article_image_form" wraptag="ul"
class="thumbs noscript" />
[SQL (0.000201940536499): select * from txp_image where id in(17,18,19) order by field(id, 17,18,19)]
[SQL (0.000115871429443): select Form from txp_form where name='article_image_form']
[Form: article_image_form]
<txp:upm_img_full_url />
<txp:upm_img_caption />
<txp:upm_img_thumb_url />
<txp:upm_img_alt />
<txp:upm_img_alt />
<txp:upm_img_caption />
[Form: article_image_form]
<txp:upm_img_full_url />
<txp:upm_img_caption />
<txp:upm_img_thumb_url />
<txp:upm_img_alt />
<txp:upm_img_alt />
<txp:upm_img_caption />
[Form: article_image_form]
<txp:upm_img_full_url />
<txp:upm_img_caption />
<txp:upm_img_thumb_url />
<txp:upm_img_alt />
<txp:upm_img_alt />
<txp:upm_img_caption />
[ ~~~ secondpass ~~~ ]
-->Last edited by JeroenC (2010-04-17 18:37:06)
Time to volunteer? Come and join us at a great project which is going to be opensource: https://www.caloom.com
Offline
Re: article with 3 thumbs and 1 full image
Hi Jukka :-)
what did you mean by js implementation? Is this info in the head already or do you mean something else?
thanks for helping
Time to volunteer? Come and join us at a great project which is going to be opensource: https://www.caloom.com
Offline
Re: article with 3 thumbs and 1 full image
First thing that came in my mind, are you sure that your paths /files/jquery-1.3.2.min.js and /files/jquery.galleriffic.js are correct? You sure it isn’t actually /txp/files[..]. Preferably you could create the urls with <txp:site_url /> so that they point to right location, even when you move the site. Like so:
<script type="text/javascript" src="<txp:site_url />files/jquery-1.3.2.min.js"></script>
[...]When looking at your actual JS source, it seems that you are loading the script to wrong element block. Shouldn’t you be loading it to #thumbs and not to #gallery? Like so:
$('#thumbs').galleriffic({And last, you are probably suposed to wrap all the JS with $(document).ready(function() {}); not just the one block. With out it, the JS is not loaded.
I, personally, would use the basic callerific configuration and trying to make it working before trying more complicated scripts.
Hope it helps — some at least.
Last edited by Gocom (2010-04-17 19:13:16)
Offline
Re: article with 3 thumbs and 1 full image
Jukka is correct – that’s the first thing I saw too – you should always use txp:site_url because once you move the site from localhost to your server, the paths to the site will still be correct and you won’t need to change anything.
Can you change that first and see if it works?
Offline