Error message when Gallery is placed on the same page as a Google Map.

Dec 31, 2010 at 6:10 AM

Hello,

I've gotten help here before with getting certain problems solved, so I'm hoping you might be able to help again with this one.  I'm trying to display an image gallery using the Designit Gallery package on a webpage that also has a Google Map on it.  There is some sort of conflict happening that is creating an error message.  When I remove the Google map from the page, the image gallery displays fine and with no errors.  When I add the Google map, there is an error showing and I lose the lightbox functionality.

I did manage to solve losing the lightbox functionality as follows:

I found something somewhere (or perhaps got help here before) that said to add the following code to the page:

<script src="/scripts/Designit.Gallery/jquery.lightbox-05.pack.js" type="text/javascript"></script>
<script src="/scripts/Designit.Gallery/jquery.lightbox-0.5.js" type="text/javascript"></script>
<umbraco:Macro folderId="[#designitGallery]" ThumbWidth="100" ThumbHeight="100" LightBoxWidth="600" LightBoxHeight="600" Alias="Designit.Gallery" runat="server"></umbraco:Macro>
<script type="text/javascript">
$(function() {
  $('#diGallery a').lightBox();
});
</script> 

With that, I'd get 2 errors about the $ lines and the lightbox feature would not work whenever placed on a page that also has a Google Map.  But then I found another site that suggested to make the following change to the third script as a solution to the error I was getting:

<script type="text/javascript"> jQuery.noConflict(); jQuery(function() { jQuery('#diGallery a').lightBox(); }); </script> 

That worked to get rid of one of the error messages, and it also got the lightbox feature working.  However I'm still getting another error.  In looking over my source code on the problem page, I'm seeing the following bit of code is getting added to the very bottom of the page above the </body> tag:

<script type="text/javascript"> 
$(function() {
  $('#diGallery a').lightBox();
});
</script>

But I cannot figure out what is generating this additional code.  It seems to be automatically being added by the package in some way because I don't have anything that I've put at that spot in the page templates.  I think if I could find what is generating that code, and edit it in the same way I edited that code in the other instance of it on the page, then everything would work and I wouldn't get any errors. 

Here are the error messages I'm getting.  First in IE:


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Fri, 31 Dec 2010 07:03:25 UTC


Message: Object doesn't support this property or method
Line: 339
Char: 1
Code: 0
URI: http://www.fyccn.org/locations/beau-turner.aspx


And then in the Firefox Error Console:


Error: $ is not a function
Source File: http://www.fyccn.org/locations/beau-turner.aspx
Line: 341


Again, these errors only show up when there is also a Google Map present on the page.  We need to have the Google Map and image gallery on the same pages in this case, so I need to get this solved.  Any help you can provide would be very much appreicated.