Hopefully I'm in the right category...
I have created a gallery on a test site that I'm integrating Lightbox2 into. For the most part, I have been successful except for one thing: the gallery doesn't show up on the intended page (resource) unless I use a longer URL. In other words, the intended URL is
www.domain.com/gallery.html
. At that address there is only a blank spot where the gallery should be. In the page's source, I can see an empty div where the gallery code should be.
However, if I go to this address:
www.domain.com/gallery.html?galItem=102&galAlbum=4&galTag=
...the page shows with the gallery working. I cannot see how/where/why the added stuff gets added to the address and why it shouldn't work on the other page.
I developed the code loosely based on a tutorial found here:
http://modxrules.com/articles/modx-revolution-gallery-with-colorbox-and-lazy-load
In my case, I'm not using Colorbox, as in the tutorial, but I was only interested in the MODx code side of the equation. I'm running Revo 2.1.3 and PHP Version 5.2.10.
This is what I have on my end:
1. I downloaded Lightbox2 and followed all instructions provided.
2. Downloaded and installed Gallery.
3. In the head of the page (by way of chunk) I have this:
<link rel="stylesheet" href="http://www.domain.com/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.domain.com/js/prototype.js"></script>
<script type="text/javascript" src="http://www.domain.com/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.domain.com/js/lightbox.js"></script>
<script>
$(document).ready(function () {
$("img").lazyload({effect : "fadeIn"});
$("a[rel='lightbox']").lightbox();
});
</script>
4. Created a chunk called lightbox_chunk and added that through a TV within the resource:
<div align="test_gallery_container">
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &rowTpl=`DemoGalAlbumRowTpl`]]
[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &thumbTpl=`DemoGalItemThumb`]]
[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
[[+GalleryAlbums]]
` &else=`
<ul>
[[+Gallery]]
</ul>
`]]
</div>
5. Created a chunk called DemoGalAlbumRowTpl and added the following code:
<div class="albumPreview">
<h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
<div class="thumb">
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a>
</div>
<div class="desc">
<p>[[+description]]</p>
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a>
</div>
</div>
6. Created a chunk called DemoGalItemThumb and added the following code:
<div class="[[+cls]]">
<li class="thumb">
<a href="[[+image]]" rel="lightbox[group]" title="[[+description]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
</li>
</div>
7. Went to components > Gallery in the upper menu, created an album, called 'commercial' which has an ID of 4, although that doesn't appear to get directly referenced anywhere in the above code. Uploaded a group of images through there.
8. Adjusted CSS to line up thumbnails properly on the page.
I think I got all the steps above. Like I said, all works okay except for the funky URL situation.
You might be wondering how I found that long URL to begin with. Well, when I first brought up the gallery page on the front end, there was a link that appeared in the content area, but only that one time. Just long enough for me to click on it. Then, when I got to the working page, I saved the link for later use. That link never appeared again.
So, can anyone spot how the long URL is being generated and why is it that the gallery isn't appearing in the shorter URL address page? And, is there any way to improve on the above code? I'm sure it's far from perfect.
Thank you in advance.
[ed. note: waizen last edited this post 14 years, 10 months ago.]
