Bootstrap Lightbox

[lesliekirk]

Is anyone using Lightbox for images other than products? I want to add it to category thumbnails but I'm having a bit of trouble with some of the Lightbox jquery's for Bootstrap. Thought I'd see if anyone else has something that is playing nicely with the Base ReadyTheme.

Thanks,
Leslie

[Bruce - PhosphorMedia]

Re: Bootstrap Lightbox

Double check:

1) that you are only calling jQuery once.
2) you execute the litebox (or any feature) only after document.ready
3) there are no other javascript errors.

the last one is easy to overlook. You thing, 'hey everything works, let me add this' and it doesn't work. turns out its some dumb js error that's not even used on that page. JS errors CAN--but don't necessarily--stop jQuery (and other js) from working.

[lesliekirk]

Re: Bootstrap Lightbox

Thanks Bruce, those tips I understand. My question though, is there any particular Lightbox script that is preferred, works better, ect with the Bootstrap Framework being used in Miva Merchant stores.

[Bruce - PhosphorMedia]

Re: Bootstrap Lightbox

Oh...I don't really think it would matter so long as it was one written to work with the version of jQuery that Bootstrap uses...meaning, I'd pick one that had been written or updated recently. I like feather lite (http://noelboss.github.io/featherlight/) and Fancy box my self.

[lesliekirk]

Re: Bootstrap Lightbox

Bruce, what's you go to javascript error checker? I'm not sure if I have a javascript error or a CSS conflict. The lightbox activates but all I have is a black screen which seems to be coming from the modal. I'm also seeing something in the source that is confusing me (which doesn't take much)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<script>


<script src="js/bootstrap.js">


<script src="js/jquery.bootstrap.simple.lightbox.js">


<script src="js/custom.js">


<script language="JavaScript">


<script>

<img class="image-shim hide" src="/images/goldenshaker450.jpg">


<div class="simple-lightbox modal fade in">

<div class="modal-content">

<a class="close" href="#">

<img alt="Shop Auburn Glaze Now" src="/images/goldenshaker450.jpg">

<p class="caption active">Shop Auburn Glaze Now</p>


</div>


</div>

<div class="modal-backdrop"> </div>

<img class="image-shim hide" src="/images/goldenshaker450.jpg">

What confuses me is why is the image that is supposed to be appearing in the popup showing up 3 times in the code but sure isn't displaying on the page.

[Bruce - PhosphorMedia]

Re: Bootstrap Lightbox

Chrome Inspector is what I usually use. Is that showing anything? (Right click, Inspect Element).

[lesliekirk]

Re: Bootstrap Lightbox

LOL, Failed to load resource - the favicon.ico. No other errors.

[lesliekirk]

Re: Bootstrap Lightbox

LOL, I surrendered and did what Bruce suggested, I switched to Featherlight. The conflicts are gone

[Bruce - PhosphorMedia]

Re: Bootstrap Lightbox

yup. simple is good.

[eldon99]

Re: Bootstrap Lightbox

Will Featherlight let you rotate though multiple images like the Magnific popup (used in Suivant)? So if you have multiple product images, you click popup on one and you can scroll through the others?

UPDATE: The answer is Yes:
http://noelboss.github.io/featherlight/gallery.html