How do I create an article-based image gallery?

Viktor · 2014-09-26 13:21:11

totoff wrote #257820:

You might want to check out this site, a tutorial on how to build what you want with core tags. in particular, here is a demo of what you need.

I tried to copy the example you posted. Although I did everything according to the tutorial, it doesn’t work.

When I click on the thumbnail, the main image doesn’t get exchanged, but the original image is shown on a blank page (as if you followed the absolute path)

It seems that the javascript isn’t working.

This is the JS:

function sooGallery(showThis) {
   if (document.getElementById) {
      document.getElementById('sooGalleryMain').src = showThis.href;
      document.getElementById('sooGalleryMain').title = showThis.title;
      document.getElementById('sooGalleryCaption').childNodes[0].nodeValue = showThis.title;
      return false;
   }
   return true;
}

And this the Txp code:

<div id="sooGallery">
<txp:images limit="1">
    <txp:image html_id="sooGalleryMain" />
    <p id="sooGalleryCaption"><txp:image_info /></p>
</txp:images>
</div>

<div id="sooGalleryThumbs">
<txp:images form="gallery_demo_1" break="" />
</div>

<a href="<txp:image_url />" title="<txp:image_info />" onclick="return sooGallery(this)">
<txp:thumbnail/>
</a>

If anybody can see the mistake, please tell me. I’m trying to solve this for hours now.

{Fixed Textile. – Uli}

Last edited by uli (2014-09-26 14:08:11)

uli · 2014-09-26 14:09:21

Hi Viktor, is it online to check the source code?

Viktor · 2014-09-26 17:48:29

yes it is: here

Last edited by Viktor (2014-09-29 17:11:28)

colak · 2014-09-26 18:08:04

Doesn’t sooGallery need jquery to work?

Viktor · 2014-09-26 18:57:56

That, I don’t know but in the example there’s no link to jquery in the source code.

uli · 2014-09-26 21:59:30

As soon as I filled in lorem ipsum for titles and caption it started working. I’m not a JS expert so can’t explain you why. (Does somebody know? I’d like to learn why.) So that’s one way. Second one is: delete those lines from the JS you don’t intend to use.

maverick · 2014-09-27 03:59:30

I’m puzzled. soo_image (plugin) created JavaScript galleries. But Jeff’s gallery demo referred to was designed to show what could be done with the (then new) core image tags. He said that the core tags replaced most of what soo_image could do. As best as I can recall, the gallery demo doesn’t use JavaScript. Am I mistaken?

Edit
Okay, pulling foot from mouth. I just reread the page. It does reference a rudimentary JavaScript.

Last edited by maverick (2014-09-27 04:03:45)

Viktor · 2014-09-27 13:27:35

Thanks Uli for that hint. It’s quiet odd that it doesn’t work without. Could somebody who knows JS tell me in which way the code must be changed in order to work with or without captions?

uli · 2014-09-27 18:56:05

Viktor wrote #284266:

[…] tell me in which way the code must be changed in order to work with or without captions?

Jeffs solution requires that you’re consistent with what you do. You either want titles and captions. Then you’ve to fill in all these info fields (right, on the Images panel) for all of the images you want in galleries with that script. Or you don’t want to work with titles and captions. Then your JS has to be shortened to this:

function sooGallery(showThis) {
   if (document.getElementById) {
      document.getElementById('sooGalleryMain').src = showThis.href;
      return false;
   }
   return true;
}

There’s nothing in between, as far as I can tell.

Viktor · 2014-09-28 10:43:17

ok. Thank you very much for the help!

Textpattern CMS

Textpattern CMS support forum

#13 2014-09-26 13:21:11

Re: How do I create an article-based image gallery?

totoff wrote #257820:

#14 2014-09-26 14:09:21

Re: How do I create an article-based image gallery?

#15 2014-09-26 17:48:29

Re: How do I create an article-based image gallery?

#16 2014-09-26 18:08:04

Re: How do I create an article-based image gallery?

#17 2014-09-26 18:57:56

Re: How do I create an article-based image gallery?

#18 2014-09-26 21:59:30

Re: How do I create an article-based image gallery?

#19 2014-09-27 03:59:30

Re: How do I create an article-based image gallery?

#20 2014-09-27 13:27:35

Re: How do I create an article-based image gallery?

#21 2014-09-27 18:56:05

Re: How do I create an article-based image gallery?

Viktor wrote #284266:

#22 2014-09-28 10:43:17

Re: How do I create an article-based image gallery?

Board footer