Conflict between Powergallery and Fancybox

Hello... I have Powergallery installed on my website and unfortunately it doesn't support video. So to use that capability I would like to use Fancybox. I currently use the code from Powergallery on my website with a variable so that I can just name the gallery on Powergallery and it shows up on my site.

<?php
$pg_id = intval($row_WADAallshows2['comments4']);
$pg_theme = 'wtsa100pixel';
include('/home3/whereth7/public_html/showgallery/galleries/ribbon_lightbox/index.php');
?>

Below that I have the code for Fancybox

</span><a class="fancybox fancybox.iframe" href="https://www.youtube.com/embed/Y-_I-mldTiY" frameborder="0" allowfullscreen"><img src="images/buttons/Book-a-Hotel.png" width="100" height="25" /></a><br>

I load the Fancybox connections above the "head" part of the web page


<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>

I took a look at the index page from Powergallery and I saw that it also loads a different version of js

<?php if(empty($js_mootools)) { ?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-core-1.3.2-full-compat-yc.js"></script>

<script type="text/javascript" src="<?php echo $pg_config['path']; ?>js/mootools-more-1.3.2.1_min.js"></script>

<?php $js_mootools = true; } ?>

I see it also loads mootools

In any case I'm thinking this is where the conflict arises. If I delete the reference from Powergallery from my website then the Fancybox works just fine. How can I get these two to live together peacefully on the same web page?

If there is a way to get Powergallery to support the other types of media... webpages etc I'm all for that too!

Dan Lewis

If you can give me FTP access and a URL to reproduce the problem I can take a look. It is probably an issue with conflicting versions of jquery and I can try finding a solution.

Hello Ray... I've made a directory for you to work in. www.wheretheshowsare.com/fastsearchvideo

I left off any password protection to make it easier for you.

I've given you the details for the FTP log in in the private part of this message

The Powergallery is actually in two spots... but the one we use is in the sub-directory "showgallery"

I made this www.wheretheshowsare.com directory so we could work this out.

The file that has both the Powergallery code and the Fancybox code is
http://www.wheretheshowsare.com/fastsearchvideo/allshows2_detail.php

The file that has everything except the Powergallery code (and Fancybox works) is
http://www.wheretheshowsare.com/fastsearchvideo/allshows2_detail-no-gallery.php

To access a record where there are images in the Powergallery file you can do a search on the www.wheretheshowsare.com/fastsearchvideo for "Organization" Howard Alan

The button that is connected to a video to test this is the one that says "Book a Hotel" right underneath the images gallery.

I think that gives you what you need... ask if you need anything else

I think it was just the repeated jquery include causing the problems. I fixed the problem by adding this above the gallery code:

$js_jquery=true;

That tells the gallery that the jquery library has already been loaded to the page so it won't load it again.

Thanks Ray... it worked perfectly... I think I've pulled out the rest of my hair though! I've been working on this solution for days!!! Now it opens up the door to video. And of course I've got a couple more projects to tackle so I'm sure I'll be back in touch! Have a great week!

I thought everything was working fine... but only when there are no pictures in the Power Gallery. With the change you made Fancybox works fine with the links and all the pictures appear in the thumbnail previews. But when you click on a Power Gallery thumbnail to turn it into a full size picture it works great for a second and then the whole screen (including the picture) turns dark like the background.

Can we solve that problem?

Here is a link to a record that has pictures in it. You'll need to use the username and password I've provided in the private message....

http://www.wheretheshowsare.com/fastsearchvideo/allshows2_detail.php?ID=1713

I updated: /showgallery/css/slimbox/slimbox.css to set the z-index of the image to be above the overlay.

The solution is pretty good and it works. The only thing it seems to be doing that is unusual is that every time you click through a picture the black screen recycles so we get white, black, white, black as we click through. It's nice when the screen gets dark like that because it forces us to focus on the image being displayed. But in reality I could also live without that feature if I had to. I think it's somewhat distracting as you click through the pictures. Can it be fixed so it behaves like it used to and stays dark until we're finished viewing the pictures?

I know this is being picky... but the good new is that once it's done then I'll be able to use it for quite some time.

It appears the slimbox.js that the powergallery uses isn't compatible with the latest version of JQuery, and the fancybox.js that your page uses isn't compatible with the older version of jquery used by slimbox.

I was able to update .showgallery/js/slimbox.js to fix the problem.