Image Gallery Object has no method 'lightBox'

Jul 25, 2011 at 12:05 PM

Hi - great module!

 

I am using it here

http://itfworldcup2012.phuturedesign.co.uk/about-brighton

but the JQuery function seems to have a problem - the thumbnails show but when clicking the images open with no Lightbox

<script type="text/javascript">
$(document).ready(function () {
$('.image-gallery a').lightBox({imageBlank : '/Modules/Mello.ImageGallery/Content/Plugins/LightBox/Images/lightbox-blank.gif' ,
about-brighton:29Uncaught TypeError: Object [object Object] has no method 'lightBox'
imageBtnClose: '/Modules/Mello.ImageGallery/Content/Plugins/LightBox/Images/lightbox-btn-close.gif' , imageBtnPrev: '/Modules/Mello.ImageGallery/Content/Plugins/LightBox/Images/lightbox-btn-prev.gif' , imageBtnNext: '/Modules/Mello.ImageGallery/Content/Plugins/LightBox/Images/lightbox-btn-next.gif' , imageLoading: '/Modules/Mello.ImageGallery/Content/Plugins/LightBox/Images/lightbox-ico-loading.gif' } ); }); </script>

any ideas?

 

Coordinator
Jul 25, 2011 at 1:38 PM

Hi,

I took a look at you page html code and it seems to be ok. However, the ready function seems to be running when lightbox plugin is not loaded yet .

You are using a widget, right? Could you try to change its position and see if something changes? Also, you could try to add the image gallery as a content part, just for testing purposes, I mean, just to see if this is related to the widget itself.

Regards,

Gabriel

Jul 25, 2011 at 1:41 PM

HI

Yes it is a widget placed under the main content article.

How do I add as a content part - not done that before?

Thanks

Coordinator
Jul 25, 2011 at 1:46 PM

In the admin page, go to Content Types and edit the Page content type and add a Image Gallery part to it. Then, edit the page item (the one from the page that as the galleries -"about-brighton"), there it should have a dropdown to select the image gallery.

This is not the solution for your problem, it's just a mean to verify if the problem is with the widget, you know.

Jul 25, 2011 at 1:54 PM
Edited Jul 25, 2011 at 2:01 PM

thanks - still same problem.

Without widget container as a content part of page it adds below text but within <article>

http://itfworldcup2012.phuturedesign.co.uk/about-brighton

Maybe the generic JQuery that is defined in the <head> is clashing with the scripts embeded in the footer.

 

HEAD

<script src="/Modules/Orchard.jQuery/scripts/jquery-1.6.1.min.js"type="text/javascript"></script>

FOOTER
<script src="http://code.jquery.com/jquery-latest.js"type="text/javascript"></script>

THIS IS PROBLEM BUT IF I REMOVE JQUERY FROM HEAD THE HOME PAGE FEATURES FADE STOPS WORKING
CAN i ONLY INCLUDE THE js GENERATED BY IMAGE GALLERY ON PAGE THAT USES IT?








 

Coordinator
Jul 25, 2011 at 2:04 PM

Interesting. Try to remove these footer scripts to see if this is the cause.

One more thing that we can try:

Go to the Image Gallery module code, on Driver\ImageGalleryDriver

On the line:

resourceManager.RegisterHeadScript(script);

Replace with:

resourceManager.RegisterFootScript(script);

Jul 25, 2011 at 2:05 PM

SORRY I MEAN CAN WE STOP THE IMAGE GALLERY GENERATING THIS <script src="/Modules/Orchard.jQuery/scripts/jquery-1.6.1.min.js" type="text/javascript"></script>

AND JUST USE THE GLOBAL CALL TO <script src="http://code.jquery.com/jquery-latest.js"type="text/javascript"></script>


Jul 25, 2011 at 2:10 PM

should I also change this             resourceManager.Require("script", "jQuery").AtHead(); to              resourceManager.Require("script", "jQuery").AtFoot(); ?

Coordinator
Jul 25, 2011 at 2:29 PM

I saw that your image gallery is working now. What did you do? :-)

Jul 25, 2011 at 2:30 PM
Edited Jul 25, 2011 at 2:31 PM

FIXED

seems resourceManager.RegisterFootScript(script);  does not put script in foot still in <head> so the JQuery has not yet been loaded

so changed     Script.Include("http://code.jquery.com/jquery-latest.js").AtHead();

and comment out ImageGallery call to JQuery as we have it from Layout.cshtml in View

 

            //resourceManager.Require("script", "jQuery").AtHead();

http://itfworldcup2012.phuturedesign.co.uk/about-brighton

Thanks Orchard and your gallery is great!