A image gallery on Jazzcafe

santisis · Post by **santisis** » Fri Mar 28, 2014 2:03 am

Hi!

Sometime ago I've posted in the forum my wide version of the Jazzcafe theme. Now I've implementented a gallery to navigate and view all the images in a post in full size without opening any popup window.

Screenshot:

(You can view a running version in my blog: http://blog.santisi.com.ar/archives/50- ... 7-DIY.html )

The implementation doesn't modify the default rendering of the Jazzcafe template. I've implemented it as a JavaScript script that runs after the page is loaded, finding all the images in the post and replacing it onclick action.

Once the script is loaded, every post in the page makes a different gallery. Clicking on a image, it's opened scaled to the window size, and you can navigate through the gallery by clicking on the previous and next links or using the keyboard left and right arrows. To close the image, simple click on it or press the escape key.

I didn't check if the script works in other templates than Jazzcafe (it finds the post that owns an image by searching for an object with "post" class and recognizes the target likn if it's enclosed into a "a" tag with "serendipity_image_link" class, etcetera).

(I've reached the maximum of 4 links, so I will split the post in two parts.)

santisis · Post by **santisis** » Fri Mar 28, 2014 2:07 am

The gallery has four parts:

JavaScript script: http://blog.santisi.com.ar/templates/ja ... gallery.js
CSS style: http://blog.santisi.com.ar/templates/ja ... allery.css
Prev and Next images: http://blog.santisi.com.ar/templates/ja ... ryleft.png , http://blog.santisi.com.ar/templates/ja ... yright.png

The replacing of the "<body>" tag with:

Code: Select all

<body onload="init()">
  <div id="gallery">
    <div id="glryleft" onclick="prevImg()"></div>
    <div id="glryright" onclick="nextImg()"></div>
    <div id="glryclose" onclick="closeImg()"></div>
    <div id="glrynmbr"></div>
    <div id="gallerycontent"></div>
  </div>

I've tested it in Firefox, Chrome, Opera and IE7.

Maybe in a next version I will add a thumbnail navigation, support to show the image titles, and other details.

Thanks;
Sebastián

Post by **garvinhicking** » Fri Mar 28, 2014 12:58 pm

Hey,

that's pretty interesting. Thanks a lot for sharing!

(Nice work on that keyboard!)

Regards,
Garvin

jefpeace · Post by **jefpeace** » Tue May 19, 2015 10:57 pm

Hello again,

Yeah, I knew it, I don't know what to do with this, but I'm very impressed. I can't even figure out how to get my gallery to show up. I created directories and uploaded the images, but can't figure out how to do anything with them.

Help?

Thanks in advance,

Jef

Post by **yellowled** » Wed May 20, 2015 8:42 am

jefpeace wrote:I can't even figure out how to get my gallery to show up. I created directories and uploaded the images, but can't figure out how to do anything with them.

As far as I understand the original post, all you need to do is add thumbnail images that link to larger versions of the images to your posts. Do you know how to do that?

YL

jefpeace · Post by **jefpeace** » Wed May 20, 2015 8:40 pm

Thanks for the response, it's appreciated, but I don't understand any of this, really.

I've been coding html for more years than I care to mention and this is my first foray into the php and css worlds and I feel like I've never turned on a computer, let alone coded over a hundred websites.

To be totally honest, if my host didn't have an installer program, I would have a Jazzcafe theme, or even the blog to drive me insane.

In another post, the gentleman provided code to make the Jazzcafe theme expand according to one's browser resolution. That post led me here and I stand in humble awe.

I can't get my gallery to load at all. I've read everything I could find, adjusted all the settings and uploaded the files, but they simply don't show up in my blog.

I'm afraid I'm guilty of popping into an advanced forum when I'm a complete novice where all this is concerned.

Post by **yellowled** » Wed May 20, 2015 10:37 pm

jefpeace wrote:I feel like I've never turned on a computer, let alone coded over a hundred websites.

Rome wasn't built in a day, either.

jefpeace wrote:I can't get my gallery to load at all. I've read everything I could find, adjusted all the settings and uploaded the files, but they simply don't show up in my blog.

I'm afraid I'm guilty of popping into an advanced forum when I'm a complete novice where all this is concerned.

There is no advanced forum for s9y. This is it. We're here for the experts and the new guys.

So first of all, I misunderstood that all of this was included in the downloadable wide version of Jazzcafe that santisis posted. I'm not sure it is, and if it's not, it might be kind of complicated to put it in there. Do me a favor? Look in your directory containing the updated wide version of Jazzcafe. In the subdirectory images, does it include galleryleft.png and galleryright.png? If so, all the code is already there.

Also, it might help to have a URL to an example post of where you tried to build a gallery …?

YL

Timbalu · Post by **Timbalu** » Thu May 21, 2015 11:38 am

Just to mention this here, we have a plugin (Gallery Display - serendipity_event_usergallery) doing quite the same as an extra page, eg /serendipity/pages/usergallery.html, which would exist as an extra "static" page and could be bound to the themes Navigation without being a staticpage (by the staticpage plugin). In combination with the lightbox plugin (Lightbox for entry images - serendipity_event_lightbox) this would do quite the same for a plain image gallery by meda library directories.

Another thing for blogentry "galleries", is adding all images one by one by the media library to the entry and just use the "serendipity_event_lightbox" plugin to automagically make them combined or singulary available via a lightbox plugin. This is more or less exactly what this threads image gallery implementation does. Before you put too much effort into implementing this threads gallery script in your theme, you should give that a try, by first removing the themes gallery stuff you already added! (Though it might be a question of version, since you claimed using a hosters one-click-install..., or did I get you wrong?)

There are also other more advanced or quickjump usage galleries available, but this depends on what you want to use in special. Another thing worth to mention is, that some gallery related plugins in Spartacus http://spartacus.s9y.org/index.php?mode ... s_event_en like Gallery2 Embed: serendipity_event_g2embed are not recommended to use any more, with Serendipity versions >= 1.7+.

A image gallery on Jazzcafe

A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe

Re: A image gallery on Jazzcafe