why wouldn't this work in Firefox and Opera?

So the gallery section of the joomla site i am working on (www.arrowandbranch.com/joomla/gallery) uses jquery and flickr API. the sites works and looks fine in IE, Safari and Chrome, but not in FireFox and Opera. Specifically, in FF and Opera, clicking the thumbnail picture or the title of the albums doesn't load the pictures in the left box as it should.

开发者_运维百科

Any ideas as what i am doing wrong here?

---

The code that triggers your javascript is what's causing the problem.

The thumbnail picture on the right has the following markup :

<a onclick=" $(document).ready(function(){ $('#photo2').flickrGallery({ useFlickr: 'true', flickrAPIKey: '2dc6307382340967ed44d0df77f888bf', photosetID: '72157625589504841', useHoverIntent: 'true', useLightBox: 'true'   });  }); " href="#">                      
    <img style="width: 100px; height: 100px;" alt="" src="http://farm6.static.flickr.com/5207/5310233198_7f8f2295ed_s.jpg" class="album-pic">        
</a>

The problem comes from the onclick event. You are telling it to execute on $(document).ready which isn't really what you want. $(document).ready executes when the page first loads. If an event is triggered by a click, then just use onclick without $(document).ready.

<a onclick="$('#photo2').flickrGallery({ useFlickr: 'true', flickrAPIKey: '2dc6307382340967ed44d0df77f888bf', photosetID: '72157625589504841', useHoverIntent: 'true', useLightBox: 'true'  });" href="#">                      
    <img style="width: 100px; height: 100px;" alt="" src="http://farm6.static.flickr.com/5207/5310233198_7f8f2295ed_s.jpg" class="album-pic">        
</a>

will work fine.