Intuitive Bootstrap/WordPress Lightbox plugin?

  • Resolved JSin

    (@jsin)


    12 years, 11 months ago

    I’m creating a website for a brother-in-law Handyman, and his current version just has a ton of photos randomly sprawled in disorganized fashion on his Vistaprint made site.

    I’ve created a WordPress site for him using Bootstrap. I did this both for mobility but also so he can generally update it (blogs too) on his own.

    I’ve been trying to find a Lightbox plugin that I can set up for the initial photos he already has, but one that is also pretty self-intuitive so that I could teach him how to add to or set up future instances of it. Some kind of drag and drop or upload a bunch of photos that would then create a lightbox photo album for him would be great. I mention Bootstrap when asking for this so that the plugin I am trying to find (and ask for here) doesn’t override anything, and/or can also work on mobile devices as well.

    Can anyone point me in the right direction? It would be very much appreciated!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    Try:

    Gallery Carousel Without JetPack

    http://wordpress.org/plugins/carousel-without-jetpack/

    It is from these folks:

    http://www.wpbeginner.com/

    Thread Starter JSin

    (@jsin)

    12 years, 11 months ago

    Thanks for the link. It looked promising, but it’s doing something funky on my site:
    http://www.wspentertainment.com/sunnyside/photos/

    The images are opening in a lightbox, but they are way down the page and I have to scroll to see them.

    Any ideas?

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    Please list here the Gallery Shortcode that will be found in your photos page editor in HTML/Text (tab) view…

    Something such as [gallery…..]

    Thread Starter JSin

    (@jsin)

    12 years, 11 months ago

    Sure!

    It is as follows:

    [gallery ids="77,78,79,80,81,82,83,84,85,39,40,41,45,46,47,48,49,50,52,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75"]

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    I can see what the issue is just not what is causing it, the gallery is outputting some odd inline styles:

    <div class="jp-carousel-slide selected" style="left: 0px; width: 750px; height: 420px; top: 1060.125px; position: relative; -webkit-transform: translate3d(256.5px, 0, 0);"><img src="http://www.wspentertainment.com/sunnyside/wp-content/uploads/2013/05/02.jpg"></div>

    The top: 1060.125px is causing your issue…

    Do you have other photo/media related plugins installed? Can you deactivate all plugins (except this one) and switch to default unedited theme to test if it’s a plugin or the theme? this may help point you towards the issue.

    I also note your theme seems to use a lightbox.min.js (this may be some conflict or customization issue?)

    Of course this may also affect the layout, very many markup errors! You seem to missing the doc section of header.php

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.wspentertainment.com%2Fsunnyside%2Fphotos%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

    Did you create a template for page or the photo page?

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    Upon further looking, turn off showing exif data:

    Admin Dashboard>Settings>Media>Image Gallery Carousel>Metadata>uncheck “Show photo metadata (Exif) in carousel, when available.”>Save Changes

    Thread Starter JSin

    (@jsin)

    12 years, 11 months ago

    Hmm, just went to that path and I see that it already is unchecked….

    Also, I commented out the Lightbox javascript reference in the header. Also commented out the line after it (prettify) that I think also went to another option I had tried.

    Contact Form, Disqus, Embed Google Map, and the Gallery Carousel are the only plugins enabled right now. NO IDEA where that random in-line CSS is coming from :/

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    When did you download bootstrap and from where?

    Thread Starter JSin

    (@jsin)

    12 years, 11 months ago

    I basically followed this tutorial to set it up:
    http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    Can you switch to the default theme please to test?

    Thread Starter JSin

    (@jsin)

    12 years, 11 months ago

    Sure. Just did. It works. Dammit.

    I mean, that’s good and all, but that means it’s something somewhere in the bootstrap wp theme coding. I just don’t know where 🙁

    Pioneer Web Design

    (@swansonphotos)

    12 years, 11 months ago

    That theme is designed to be a very basic theme for developers and noted as such… You should use a well tested default theme (like twentyeleven) and customize away with a Child Theme…

    Thread Starter JSin

    (@jsin)

    12 years, 10 months ago

    Hey there. It’s been a couple of weeks — I’ve been busy with preparing for my wedding next month!

    This issue actually still remains in place. Now, I understand that the lightbox was you had suggested I use above worked on the default theme, and it’s having the issues on the bootstrap-wp theme.

    Given that I’ve already set up the new site using the bootstrap-wp theme, what would you suggest I take as steps to make that Photos page (and lightbox on it) function correctly? Instead of starting from scratch or anything. I’m not sure where I go from here, basically.

    Any advice is very much appreciated!

    Thanks 🙂

    Thread Starter JSin

    (@jsin)

    12 years, 10 months ago

    Been working on this for the past two days.

    I found another Bootstrap WordPress example, installed it, and the Lightbox theme worked on it. So I then started going piece by piece, incorporating elements from the 1st WP-BS theme into the new/2nd one. I found out it was an error in the header.php file.

    So then I started going line by line with that and trying to figure out what the problem was.

    And here it is:

    <!DOCTYPE html>

    That line needed to appear above the head tag and then it worked. Still not sure why the absence of that line caused the content to start way down the page, but bottom line is it is fixed now. Interesting stuff!

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Intuitive Bootstrap/WordPress Lightbox plugin?’ is closed to new replies.