Zum Inhalt

Galleriffic and Colorbox – Quick Fix

I wrote a small web gallery application and used the galleriffic template as my base layout. I liked the image preloading and the image swap effect and didn’t want any other template for my gallery script, so I modified all the links to get a „german gallery“.
The only thing that I didn’t like was the „Show Original“ link beneath the image on the right side so I decided to use colorbox to spice it up a bit.

First of all you have to add the Colorbox javascript code to your webserver and add a link to the javascript file

Normally, if you click on the „Show Original“ link you get the image in the top left corner of your browser without any css/html styling and it looks some kind of rough to me for such a great layout, so I added all files of colorbox to my server, added the needed sourcecode and added a „rel=’cbviewer'“ tag to the „Show Original“ link and after some minutes of testing I recognized, that this link is finally broken and nothing happend, when clicking on it. Nothing comes up, no nice colorbox popup, no image in an empty browser window, nothing.

The first thing that I checked was the errorconsole of firefox and found an entry of colorbox that indicates some incompatibilities between the galleriffic javascript and colorbox.
I googled a bit and found a lot of fixes for this problem and the more i found they become bigger and more complex so I started to find a fix for this on my own. I wanted a small solution, 5 lines of code, or something to get colorbox working.

I had two ideas. The first one was a small fix to get the colorbox popup if I click the „Show Original“ link, without the ‚previous‘ and ’next‘ links in colorbox. The second idea I had was a link beside the „start slideshow“ to start a colorbox slideshow in fullscreen mode with the start position at the current gallery image. I started with the small fix for colorbox and will add a small tutorial for the fullscreen slideshow later.


Here is the first small fix, to get the „Show Original“ link to work
The javascript code for the colorbox (You can read more about the JQuery live function here )

Explanation: The JQuery .live() function binds an event handler to the root dom object. The advantage of this technique is, that you can add event handlers to dom objects that doesn’t exist at the time you initialize your event handlers.
This quick fix adds a click event handler to all links ( „a href“ elements ) with the rel attribute „cbviewer“.

When a user clicks on the specified link, the colorbox is called and read some information from the link to get all information that is needed for displaying the image correctly

As you can see, this call reads the href attribute to get the image path and the title attribute for displaying the title information.

Here is the html code you have to edit:

Here are 2 pictures with the fix built in into the Galleriffic sourcecode and what it look like in the end.

Galleriffic Quickfix Galleriffic Quickfix Galleriffic Quickfix - what it looks like

Veröffentlicht inCodingJQuery

7 Kommentare

  1. Arie Arie

    Are you going to go through a tutorial for the fullscreen slideshow? That would be great if possible. I wasn’t able to get it to work yet.

  2. Maybe I can do this tomorrow, or at the weekende. I’m missing this feature every time I visit my gallery. I’ll write you if I get it.

  3. Stephan Bernhard Stephan Bernhard

    hi marco

    i integrated colorobox in galleriffic as you described above.

    the colorbox works fine with title and close-button (through the download-link).

    but all other buttons are set to display:none.
    so there is no navigation in colorbox, although i explicitly set arrowKey to true and slideshow to true.

    i made a lot of research in finding an answer to this problem, unfortunately without success.

    galleriffic only works with jquery 1.3.2

    do you have an answer to my problem?

    thanks in advance
    stephan

  4. Hi Stephan,

    what do you mean with „no navigation“?
    Do you want so switch over to the next picture, or like a diashow?

    Regards
    Marco

  5. Stephan Bernhard Stephan Bernhard

    hi marco

    by navigation i mean the buttons „cboxPrevious“, „cboxNext“ und „cboxSlideshow“ which are set to „display: none;“

    close

    i want the user to be able to klick through in the colorbox.

    stephan

  6. Stephan Bernhard Stephan Bernhard

    sorry, the html was not shown, here another try:

    <button id=“cboxPrevious“ type=“button“ style=“display: none;“></button>
    <button id=“cboxNext“ type=“button“ style=“display: none;“></button>
    <button id=“cboxSlideshow“ style=“display: none;“></button>
    <button id=“cboxClose“ type=“button“>close</button>

  7. Hi Stephan!

    It is not possible to walk through all the pictures using colorbox. You have to tag all the pictures with the colorbox class tag and try to do it, but i don’t know if it works as expected, because the „fullscreen“ call of colorbox doesn’t have anything to do with the usual way colorbox is working. I stopped using colorbox for a while, so I dont know if it would work, if you add the class tag to all of your pictures and start with one by clicking at „fullscreen“.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This site uses Akismet to reduce spam. Learn how your comment data is processed.