Hi all - this ones got me stumped… running MySource Matrix v3.12.4
Have been trying to implement a Lightbox photo gallery using the following Lightbox - http://www.lokeshdhakar.com/projects/lightbox2/
It was working OK (getting lightbox hover effect, and images loading) whilst all files were under construction but when I pushed them all live, lightbox effect won’t come up and firebug extension in firefox throws back errors.
Have referenced the different .js files towards the top of the design’s parse file (as below)
[codebox]<script type=“text/javascript” src=“mysource_files/jquery-1.2.6.min.js”></script>
<script type=“text/javascript” src=“mysource_files/prototype.js”></script>
<script type=“text/javascript” src=“mysource_files/scriptaculous.js?load=effects,builder”></script>
<script type=“text/javascript” src=“mysource_files/lightbox.js”></script>
<script type=“text/javascript”>
$( function(){
$(“table.releases tr:even”).addClass(“even”);
$(“table.releases tr:odd”).addClass(“odd”);
});
</script>[/codebox]
One thing I noticed and worth mentioning is that the jquery-1.2.6.min.js function which provides an alternating striped effect on an asset
listing table stops working when the lightbox files are added to the parse file.
The jquery-1.2.6.min.js doesn’t appear to break Lighbox however as it was working prior to pushing page/files live (with all referenced in parse file).
The individual files protype.js, lightbox.js etc children of the design parse file.
Whilst setting up and testing Lightbox, all files (images, .js files etc) were “under construction”. When all were pushed live Lightbox effect stopped working - if you click on the thumbnail image nothing happens. Placed the page with the lightbox gallery back “under construction” but can’t get the Lightbox effect to happen again when clicking on thumbnail of image.
Firebug extension gives the following errors
[codebox]
Builder is not defined
initialize()lightbox.js (line 132)
klass()prototype.js (line 48)
(no name)()lightbox.js (line 497)
wrapper(dataavailable )prototype.js (line 3877)
fire(Document _nocache, “dom:loaded”, undefined)prototype.js (line 3972)
_methodized()prototype.js (line 246)
fireContentLoadedEvent()prototype.js (line 4006)
[Break on this error] objBody.appendChild(Builder.node(‘div’,{id:‘overlay’}));
[/codebox]
and when you try and click on a thumbnail:
[codebox]
$(“overlay”) has no properties
start(a rirdc2.jpg)lightbox.js (line 209)
(no name)(click clientX=0, clientY=0)lightbox.js (line 194)
(no name)()prototype.js (line 209)
wrapper(click clientX=0, clientY=0)prototype.js (line 3877)
[Break on this error] $(‘overlay’).setStyle({ width: arrayPageSize[0] + ‘px’, height: arrayPag…
[/codebox]
Permissions for page with Lightbox gallery are as follows
Read permission - Public User
Write permission - System Administrator
Admin Permisson - names of our admin user groups
Not sure where to go from here …any ideas?
When you look at the source of your output page, are the URLs to the JavaScript files valid? if you try to load the files directly, does it work?
[quote]One thing I noticed and worth mentioning is that the jquery-1.2.6.min.js function which provides an alternating striped effect on an asset
listing table stops working when the lightbox files are added to the parse file.[/quote]
There is an even/odd keyword in asset listings that allows you to do this same thing. 
URL etc modified to protect the innocent.
[codebox]<script type="text/javascript" src="http://www.our-url.com/_designs/folder_name/design_682643/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://www.our-url.com/__data/assets/file/0008/713708/prototype.js"></script>
<script type="text/javascript" src="http://www.our-url.com/__data/assets/file/0004/713704/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.our-url.com/__data/assets/file/0005/722525/lightbox.js"></script>[/codebox]
Copied the url into IE for the jquery-1.2.6.min.js one and it doesn't resolve (file not found)
Other 3 (Lightbox) ones are OK - IE prompts me to download the .js files.
Didn't know about that one! :D
How does one go about setting that up? Sounds like a neater/better solution than the js library.
[quote]Didn't know about that one! 
How does one go about setting that up? Sounds like a neater/better solution than the js library.[/quote]
It just prints the text "even" if it is even, and "odd" if it is odd. Then you can just use that keyword in your class name, and style appropriately.
Interestingly I am having the same problems with Lightbox and Matrix… worked fine on my site before but once we moved it into Matrix nothing happens if you click on an image when Lightbox should kick in and overlay the picture.
The URLs directly to the file work fine and they will load. I'm wondering if it's struggling with the load=effects,builder bit, maybe it can't call it properly in Matrix?
I figured it had to be something I was doing and haven't had time to pay it much attention but I would be very keen to find out what the issue is here!
We're running 3.16.0.
[quote]Interestingly I am having the same problems with Lightbox and Matrix… worked fine on my site before but once we moved it into Matrix nothing happens if you click on an image when Lightbox should kick in and overlay the picture.
The URLs directly to the file work fine and they will load. I'm wondering if it's struggling with the load=effects,builder bit, maybe it can't call it properly in Matrix?
I figured it had to be something I was doing and haven't had time to pay it much attention but I would be very keen to find out what the issue is here!
We're running 3.16.0.[/quote]
Did you ever have it working in Matrix? The thing that has really got me scratching my head is the fact that while all the files were "under construction" it was working perfectly (well, close to perfectly there was a weird bug in IE6 where the image would fail to load into the lightbox window 1/10 times, refreshing the page seemed to reset the random failure counter though!).
Pushed all the files (page, js files, images etc) live and it's broke… 
This is because Matrix changes the URLs for files that are Live with Public Read permission. Try setting "Allow Unrestricted" to "No" for all your JavaScript files (which will revert them back to their Matrix-based URL) and see if that fixes it.
Actually: If you load the page with /_nocache on the end of the URL, does it paint a different URL for the jquery file? It may be caching causing a problem here.
[quote]This is because Matrix changes the URLs for files that are Live with Public Read permission. Try setting "Allow Unrestricted" to "No" for all your JavaScript files (which will revert them back to their Matrix-based URL) and see if that fixes it.
Actually: If you load the page with /_nocache on the end of the URL, does it paint a different URL for the jquery file? It may be caching causing a problem here.[/quote]
Avi you sir are a champion!!!!! It's working perfectly now (loading button and close button isn't coming up but should be easy enough to fix).
I changed the "Allow Unrestricted" to "No" for all the Javascript files as suggested.
Many thanks!
This is not an optimal solution, but it proves that the URLs are causing the issue: when a file asset is made Live with Public Read, the URL changes to __data/ (by default) so that the file is served directly by Apache. This is significantly faster and allows the browser to better cache the file.
I would experiment with your settings to see if you can get the JavaScript working again with Allow Unrestricted set to "Yes". Also, be sure to clear the Matrix cache (if you have caching enabled) on your Designs if you make this change.
Setting unrestricted access to 'no' worked for me too.
Is it okay to use this as a permenant solution if there aren't any performance issues?
As long as you keep monitoring performance. By having this option disabled, Matrix has to do significantly more work per page load.
I am pretty sure this problem spurs from lightbox wanting to have everything within the same directory location (lightbox, scriptalicous, protype) and when it does not find them all in the same directory structure (when they are changed to live, and served by apache), it breaks.
Another solution to this problem is to use thickbox as an alternative, we use this, and have been happy with it.
FWIW, we use thickbox which is based on mootools. The mootools library is hosted on Google'd ajax CDN, so there are performance and cost benefits. (edit: The slimbox site seems to be down at the moment)
cheers,
Richard