Lightbox with Neatline

Hi,

I’m trying to get Lightbox to work on Neatline 2.1.1. I was able to make it work for Omeka (using the instructions at http://omeka.org/codex/Adding_LightBox_to_Omeka), but think I’m missing something basic for Neatline. I may be in over my head, since I don’t know enough code to figure out what I need to do (or, most of the time, why one thing works and another doesn’t), but I’m wondering if anyone could clarify the process for me/others in my situation.

I found the discussion on GitHub (https://github.com/scholarslab/Neatline/issues/318), uploaded the .js and .css files to /plugins/Neatline/views/shared/javascripts and plugins/Neatline/views/shared/css, and then attempted to get them to talk to each other. So far, no luck. Do I just need to edit the items.php file (and if so, does any kind soul know what I might need to tell it)? Or is there significantly more that needs to happen?

Thanks for any help!
Abigail

Hi Abigail,

Those instructions are particularly difficult to parse out. We'll try the solution outlined on that page that uses a Neatline theme

1. Instead of putting those files under plugins/Neatline/views/shared/javascripts and plugins/Neatline/views/shared/css, create some directories under your current theme. Say you're still using the default theme and the slug for the Neatline exhibit is cool-exhibit (you can find this in the Neatline exhibit settings as "URL slug"). Create the directory themes/default/neatline/exhibits/themes/cool-exhibit.

2. Now, put the Lightbox JavaScript and CSS files into that directory, but name them script.js and style.css.

3. Also in that directory, add a file named item.php. It should contain this:




<?php echo all_element_texts('item'); ?>

<?php if (metadata('item', 'has files')): ?>
<div id="itemfiles" class="element">
    <h3><?php echo __('Files'); ?></h3>
    <div class="element-text">
<?php 

set_loop_records('files', $item->Files);
foreach (loop('files') as $files) {
    echo file_markup(
        get_current_record('file'),
        array(
            'itemSize' => 'thumbnail',
            'linkAttributes' => array(
                'data-lightbox' => 'setimages'
            )));
}

?>
    </div>
</div>
<?php endif; ?>

The section beginning with the forloop handles each image's output, and the line with 'data-lightbox' is what turns on the lightbox for that image.

Thanks so much for your answer - it makes things much clearer!
I think I may still be missing something, though, since I can’t get it to work. The questions I have now are:

1) Do I need something more in the item.php file? Should I be pasting in other code from a different item.php file to make this work, or does Neatline just use what’s different in the custom theme’s files, and sort of go up to the next level of files for the rest of its instructions?
2) Do I need to change the .js file at all, since I renamed the .css file? (It seems like it might be looking for this.$lightbox.css at one point at least, and I’m not sure if I’ve messed it up by renaming lightbox.css as style.css.)
3) Do I need a show.php file in the custom theme? It sounds like I wouldn’t unless I wanted to change something, but in the Omeka part of the theme that’s where I told it to use lightbox, so I’m wondering if I was meant to create a file like that, or even to just copy that one in to the custom theme wholesale. (In fact, if I can get the custom themes working, we will want to change things here, since I guess this is how you can control what parts of the Dublin Core metadata show up.)
4) Finally, and probably unimportantly, when you say “The section beginning with the ‘forloop’” do you mean the part where it says “foreach (loop”...?

I may be on entirely the wrong track here. Thanks again if you can clear anything up. And sorry I let the topic die for a week -- I only get to work on this project a few days a week.

Also, just FYI I do have custom themes working on our two projects. It's just the lightbox element that I can't get working.

Hi,

I'm new to Omeka/Neatline, and I was struggling with this as well. I *think* my main problem stemmed from Neatline's initialization removing/overwriting the Lightbox's divs.

I was able to overcome this "inelegantly" by checking for their existence at the beginning of the start command.

In lightbox.js, find the Lightbox.prototype.start function, and paste the following below the $window variable declaration:

if (!$('#lightboxOverlay').length && !$('#lightbox').length) {
  this.build();
}

If any of the more seasoned pro's could offer a more suitable solution that doesn't involve modifying the lightbox.js file, I would be greatly appreciative.

If it helps, I'm using the grunt functionality described in the neatlight theme to bundle my js and css files.

-Dave

Take a look here, it might help.
https://github.com/scholarslab/Neatline/issues/318

Hey frenchofoutremer,

Sorry I haven't gotten back to you sooner. Here are some answers, hopefully:

1. You can put other things into the item.php, but you don't have to. See what the items look like, and if it doesn't meet what you want, you can change it further.
2. You'll rename the JavaScript file script.js.
3. Yes, you'll put all of these files into the custom theme. Say the theme's directory is lightning, you'd put these into themes/lightning/neatline/exhibits/themes/neatline-exhibit-name. You do not need a show.php, though. It changes the page for the entire exhibit, and that's probably not what you want.
4. Yes, that's exactly what I mean when I talk about the forloop.

Hope this helps. Again, sorry it's so late.
Eric

Hi Dave,

I'm not sure exactly what is going on here. Neatline only clears all of the content from the page when it's creating the exhibit in fullscreen mode. Lightbox's divs will be inside of the pop-up for each item.

Maybe let me ask a few questions:

* Is the exhibit in fullscreen or embedded mode?

* What code are you adding in your theme?

* Is there a public URL where I could see what you're working on?

Eric

> Neatline only clears all of the content from the page when it's creating the exhibit in fullscreen mode.

This may be the culprit. I used a code-stepper and did verify that the lightbox divs are being removed after they are created.

> Is the exhibit in fullscreen or embedded mode?

Fullscreen

> What code are you adding in your theme?

I'm using the following publicly available sources:
https://github.com/davidmcclure/neatlight
https://github.com/scholarslab/neatline-theme-template
http://lokeshdhakar.com/projects/lightbox2/

I enabled grunt to bundle all of the css and js into style.css and script.js (lightbox.js & lightbox.css)

> Is there a public URL where I could see what you're working on?

Sadly no, I'm behind a firewall for development.

Thanks!

-Dave

Hmm. I'm kind of stumped. Maybe instead of using the neatline-theme-template, just put the files that you're actually changing into the directory.