smd_gallery: super-flexible gallery generator

MattD · 2011-08-30 18:49:27

You would not need to use smd_gallery with the code I provided. If you want to use a form you would put this in the form:

<txp:image_url><txp:thumbnail/></txp:image_url>
		<div class="caption">
		<div class="image-title"><txp:image_info type="name"/></div>
		<div class="image-desc"><txp:image_info type="caption"/></div>
		</div>

Then use this on the gallery page.

<div id="gallery" class="content">
	<div id="controls" class="controls"></div>
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow"></div>
	</div>
	<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<txp:images class="thumbs noscript" wraptag="ul" break="li" category="mezs" form="gallery" />
</div>

This example only covers how to get html output similar to what you want. I haven’t gone into configuring the Gallerfic plugin but more info on that can be found on the Gallerfic Site. This layout comes from Example 2

elwins · 2011-08-30 19:25:21

Oh, now looks better! Images are there where they should be, only 2 problems, when I am clicking on thums, they are opening in full size like normal linked image
http://127.0.0.1/galerija/img1.png and in place, where should be bigest image, are only loader, whos loading all the time, but image arnt showing….

Edit:
@
<txp:thumbnail/> <div class=“caption”> <div class=“image-title”><txp:image_info type=“name”/></div> <div class=“image-desc”><txp:image_info type=“caption”/></div> </div>

Changed and THUMBS arnt linked, so left problem with loader and images switching! @

Last edited by elwins (2011-08-30 20:09:34)

MattD · 2011-08-30 20:13:33

What JavaScript are you using to set up Gallerific? Sounds like that isn’t working. You will need the linked images in place for it to work also.

Maybe this whould be a new thread since it’s not smd_gallery specific?

elwins · 2011-08-30 20:21:19

@ <script type=“text/javascript”> jQuery(document).ready(function($) { // 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’).opacityrollover({ mouseOutOpacity: onMouseOutOpacity, mouseOverOpacity: 1.0, fadeSpeed: ‘fast’, exemptionSelector: ‘.selected’ });

// Initialize Advanced Galleriffic Gallery var gallery = $(‘#thumbs’).galleriffic({ delay: 2500, numThumbs: 15, preloadAhead: 10, enableTopPager: true, enableBottomPager: true, maxPagesToShow: 7, imageContainerSel: ‘#slideshow’, controlsContainerSel: ‘#controls’, captionContainerSel: ‘#caption’, loadingContainerSel: ‘#loading’, renderSSControls: true, renderNavControls: true, playLinkText: ‘Play Slideshow’, pauseLinkText: ‘Pause Slideshow’, prevLinkText: ‘&lsaquo; Previous Photo’, nextLinkText: ‘Next Photo &rsaquo;’, nextPageLinkText: ‘Next &rsaquo;’, prevPageLinkText: ‘&lsaquo; Prev’, enableHistory: false, autoStart: false, syncTransitions: true, defaultTransitionDuration: 900, onSlideChange: function(prevIndex, nextIndex) { // ‘this’ refers to the gallery, which is an extension of $(‘#thumbs’) this.find(‘ul.thumbs’).children() .eq(prevIndex).fadeTo(‘fast’, onMouseOutOpacity).end() .eq(nextIndex).fadeTo(‘fast’, 1.0); }, onPageTransitionOut: function(callback) { this.fadeTo(‘fast’, 0.0, callback); }, onPageTransitionIn: function() { this.fadeTo(‘fast’, 1.0); } }); }); </script> @

Like a Scripts and in head:

<!— Optionally include jquery.history.js for history support —> <script type=“text/javascript” src=”<txp:site_url />js/jquery.history.js”></script> <script type=“text/javascript” src=”<txp:site_url />js/jquery.opacityrollover.js”></script>

Like in example2.html

Last edited by elwins (2011-08-30 20:23:11)

MattD · 2011-08-30 20:48:02

Any javascript errors? Maybe use Firebug or someother tool to debug the javascript. The behavior you are explaining sounds like that’s where the issue is.

elwins · 2011-08-30 20:55:13

hmm, Now i am watching on my sirte and example page with FF6.0 firebug..
Place where should be big picture it isnt, because it inst loaded there.

Last edited by elwins (2011-08-30 21:03:14)

MattD · 2011-08-30 21:01:18

Yes because Gallerific isn’t doing it’s job. Could I get a link to look at? I’m afraid I can’t help much more without looking at the actual site.

elwins · 2011-08-30 21:03:24

Oh, found out someting.

In example: <a class="thumb" name="leaf" href="....]
In my site: <a href="

Maybe this is that problem.

Last edited by elwins (2011-08-30 21:09:20)

MattD · 2011-08-30 21:31:49

Change <txp:image_url><txp:thumbnail/></txp:image_url> to

<txp:image_url class="thumb"><txp:thumbnail/></txp:image_url>

if that doesn’t work you can try:

<a class="thumb" name="<txp:image_info type="name"/>" href="<txp:image_url/>"><txp:thumbnail/></a>

elwins · 2011-08-30 21:56:10

<a class="thumb" name="<txp:image_info type="name"/>" href="<txp:image_url/>"><txp:thumbnail/></a>

First version I already had tested!
Second version Works!
Thanks for helping! :)

drudog · 2011-09-01 16:42:18

I’m having trouble getting the image output I need. I’ve tried smd_gallery and also the basic article_image output to no avail so I’m going to put it up to the community to point me in the right direction.

I need to call the image associated to the article however, the contents of the article-image field needs to contain a relative link to the image (ie. ‘images/c1_camera.jpg’) and not the usual txp id. This is all fine and good and is possible with the simple txp:article_image tag.

Now here’s the trick, I need to be able to format the output of that call like so:
<a href="url-of-the-image"><img src="url-of-the-image" width="179" /></a>

I’m stumped as to how to wrap the full image with a link to the full image without using a thumbnail. Also, I’ve tried to use smd_gallery with the id=”?article_image” function but this didn’t give me any output, I assume because it wants an image id and not a relative path.

Any ideas?

Bloke · 2011-09-01 16:52:26

drudog wrote:

I need to be able to format the output of that call like so <snip>

How about this lesser-known but useful trick that means you won’t even have to use smd_gallery:

<a href="<txp:custom_field name="article_image" />"><img src="<txp:custom_field name="article_image" />" width="179" /></a>

Untested, but I think that’ll do what you want (or at least put you on the path towards getting something you want).

Textpattern CMS

Textpattern CMS support forum

#841 2011-08-30 18:49:27

Re: smd_gallery: super-flexible gallery generator

#842 2011-08-30 19:25:21

Re: smd_gallery: super-flexible gallery generator

#843 2011-08-30 20:13:33

Re: smd_gallery: super-flexible gallery generator

#844 2011-08-30 20:21:19

Re: smd_gallery: super-flexible gallery generator

#845 2011-08-30 20:48:02

Re: smd_gallery: super-flexible gallery generator

#846 2011-08-30 20:55:13

Re: smd_gallery: super-flexible gallery generator

#847 2011-08-30 21:01:18

Re: smd_gallery: super-flexible gallery generator

#848 2011-08-30 21:03:24

Re: smd_gallery: super-flexible gallery generator

#849 2011-08-30 21:31:49

Re: smd_gallery: super-flexible gallery generator

#850 2011-08-30 21:56:10

Re: smd_gallery: super-flexible gallery generator

#851 2011-09-01 16:42:18

Re: smd_gallery: super-flexible gallery generator

#852 2011-09-01 16:52:26

Re: smd_gallery: super-flexible gallery generator

Board footer