A image gallery on Jazzcafe

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
santisis
Posts: 3
Joined: Sun Jul 07, 2013 4:56 am

A image gallery on Jazzcafe

Post by santisis » Fri Mar 28, 2014 3: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:
Image
(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.)
Last edited by santisis on Fri Mar 28, 2014 3:08 am, edited 1 time in total.

santisis
Posts: 3
Joined: Sun Jul 07, 2013 4:56 am

Re: A image gallery on Jazzcafe

Post by santisis » Fri Mar 28, 2014 3:07 am

The gallery has four parts:
  1. JavaScript script: http://blog.santisi.com.ar/templates/ja ... gallery.js
  2. CSS style: http://blog.santisi.com.ar/templates/ja ... allery.css
  3. Prev and Next images: http://blog.santisi.com.ar/templates/ja ... ryleft.png , http://blog.santisi.com.ar/templates/ja ... yright.png
  4. 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

User avatar
garvinhicking
Core Developer
Posts: 30014
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: A image gallery on Jazzcafe

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

Hey,

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

(Nice work on that keyboard!)

Regards,
Garvin
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

jefpeace
Posts: 4
Joined: Tue May 19, 2015 10:50 pm

Re: A image gallery on Jazzcafe

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

User avatar
yellowled
Regular
Posts: 6990
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: A image gallery on Jazzcafe

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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

jefpeace
Posts: 4
Joined: Tue May 19, 2015 10:50 pm

Re: A image gallery on Jazzcafe

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. :lol:

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.

User avatar
yellowled
Regular
Posts: 6990
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: A image gallery on Jazzcafe

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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: A image gallery on Jazzcafe

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+.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

Post Reply