Fancybox / Lightbox on Omeka 2.1.2

Hi,
I've been trying to get Lightbox working on Omeka and turns out that (as a result of my searching on here) that Lightbox is't compatible with Omeka 2.x.

Just wondering if anyone has managed to get Lightbox / Fancybox working on Omeka 2.x or if anyone has any ideas on a alternative and how to implement it?

Thanks

Hi, you can use any lightbox you like with any version of Omeka (remember that lightboxes are just Javascript and their only real dependencies are in the HTML markup). You just need to include the required scripts and get the markup right:

A simplified example using fancybox:

include the scripts:
in your header, queue_js_file('path/to/fancybox');
(Omeka includes jQuery by default in most themes but make sure because it's required for fancybox)

in items/show, loop files and output the markup for images:

foreach (loop('files', $item->Files) as $file):
if ( ($file->hasThumbnail()){

     $caption = (metadata($file,array('Dublin Core', 'Title'))) ? '<strong>'.metadata($file, array('Dublin Core', 'Title')).'</strong>' : '';

     file_markup($file, array('imageSize'=>'square_thumbnail', 'linkToFile'=>'fullsize','linkAttributes'=>array('rel'=>'fancy_group', 'class'=>'fancyitem','title' => metadata('Item',array('Dublin Core', 'Title')),'caption'=>$caption)),array('class' => 'square_thumbnail'));
}
endforeach;

in your footer (typically), initialize the fancybox script you included in the header. That might look something like this:

jQuery(document).ready(function() {
jQuery("a.fancyitem").fancybox({
    beforeLoad: function() {
        this.title = jQuery(this.element).attr('caption');
    },
    helpers:  {
        title : {
            type : 'over'
        },
        overlay : {
            showEarly : false
        }
    }
});

});

Hi ebellempire,
THANK YOU for your reply.
It makes more sense to me now, and I have been reading around and trying to implement it.

Just wondering if I could get a little more help (my coding knowledge is limited)

So far i have got this added into header.php for

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

Now i understand that I need to get something like in order to assign the class to display the image:
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
Which is what the first block of code you gave me is meant to achieve.
As i don't fully understand how it works I just pasted that block onto the end of show.php and crossed my fingers.
Naturally it didn't work haha, so could you explain how I would add it in correctly?

Then the final bit I think is to initialise the script in footer.php.
I got this block from the documentation.

<script>

        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
    </script>

Would it be best to use your block of code or the documentation one?

THANK YOU once again!

The first block of code is a foreach loop that looks for images within the item's list of files. When it finds an image (a file that has a thumbnail), it outputs the HTML markup and uses the caption data attribute. The result looks like:

<a href="path/to/fullsize.jpg" class="fancyitem" rel="fancy_group" caption="Whatever title is entered for the file" title="Whatever title is entered for the file">
<img src="path/to/square_thumbnail.jpg" />
</a>

Keep in mind that most Omeka themes already include jQuery by default, so you don't need to include it a second time (as you've done with http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js), which will cause the scripts to fail.

A couple things to note about my example that I now realize might cause confusion:

• My example uses the class "fancyitem" and your example uses "fancybox" (as does the Fancybox documentation) as the target class. The script you call in the footer looks for instances of that class to create the Fancybox effect so you need to be sure that they match. Either one is fine.
• My example uses a custom data attribute (caption) and my footer script is instructed to use it with the function in that BeforeLoad property. By default, Facybox uses the link title attribute. So you'd want to coordinate the attribute used in the markup with the one used in the footer script. Either one is fine.

Hi, I've been trying to install Lightbox 2 on Omeka 2.1.1 but it doesn't seem to work.

I've been following the instructions found in http://omeka.org/codex/Adding_LightBox_to_Omeka but I don't think they're an updated version, are they?

I've managed to adapt the 3 first steps but I'm having problems with number 4: I don't know how should I mix the code that provides the page, with the one present in show.php (In case you need it, I'm using the default theme)

That's what I've tried so far, but with no results.

<?php if (metadata('item', 'has files')): ?>
<div id="itemfiles" class="element">
<h3><?php echo __('Files'); ?></h3>
<?php if (get_theme_option('Item FileGallery') == 1): ?>
<div class="element-text"><?php echo item_image_gallery(array('linkAttributes'=>array('rel'=>'lightbox[gallery]'))); ?></div>
<?php else: ?>
<div class="element-text"><?php echo files_for_item(); ?></div>
<?php endif; ?>
</div>
<?php endif;?>


Could you help me, please? Thanks in advance!

That Lightbox tutorial is for an old version of Omeka. Someone should probably delete it.

It looks like you just need to include the lightbox script (but not jQuery since it's already included) and the stylesheet and images (make sure to update the image paths in the stylesheet).

Note that the Lightbox documentation example uses a custom data attribute called data-lightbox (though it looks like rel is still allowed), so either of these should work:

item_image_gallery(array('link'=>array('data-lightbox'=>'lightbox[gallery]','title'=>'My Caption')))

item_image_gallery(array('link'=>array('rel'=>'lightbox[gallery]','title'=>'My Caption')))

http://lokeshdhakar.com/projects/lightbox2/

Indeed, a very old version. I've updated the Adding Lightbox guide with what I did to get it going. Let us know if I've missed something in the instructions.

Thank you so much for updating the guide!
I've been messing with this for days, trying all manner of combinations etc, and even with your help was managing to fail miserably.

Just followed your guide and got it working within 3 minutes!

@patrickmj Excellent new instructions! Easy to follow. Thanks.

Thanks for the new guide and thanks to Ebellempire for his answer!