Not so Simple Scroll Gallery (Updated)
I've been super naughty, staying up late, learning more about XSLT galleries than I care for. And for what? Well not just a bug fixed version of Scroll 0.1.3, but a new version 0.1.5 0.1.7 which includes the ability to change the gap between images. I've fixed the annoying unmentioned bug where the gallery is too big to fit across any size page (mixing 20px padding with 100% width-Doh!). 0.1.7 adds a cool menu bar (well it was there in 0.1.6, but that was seen only by a very small handful!)
However the big feature is something loads of people have asked for in a gallery... a Menu system...
Yep, that's right, I've 5 menu places to add in your page links. I tried to do this before, but failed miserably. Just this time round I was in the zone a bit after figuring out more XSLT and got it to work.
Anyhow:
Updated for 0.1.7: Sample Gallery
Download
0.1.7 also features more commented out code to fix height issues with landscape only height galleries. I've also fixed where '3rd Link' should've read 3rd Page Name and put the link/name fields in the same box to tidy it up.
Big shout to Mark Sirota for his suggestions and bug testing on this.
Finally. If you want to add more menu items, I've included comments in the code on what to cut and paste. Remember to change where it says fifth to sixth with the pasted info and all will be fine. The comments are in both galleryMaker.xml and transformer.xslt.
If you use this gallery, please put a link to a sample gallery in the comments!
To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.
I recommend that you create an alias/shortcut to this Lightroom folder for future use.
However the big feature is something loads of people have asked for in a gallery... a Menu system...
Yep, that's right, I've 5 menu places to add in your page links. I tried to do this before, but failed miserably. Just this time round I was in the zone a bit after figuring out more XSLT and got it to work.
Anyhow:
Updated for 0.1.7: Sample Gallery
Download
0.1.7 also features more commented out code to fix height issues with landscape only height galleries. I've also fixed where '3rd Link' should've read 3rd Page Name and put the link/name fields in the same box to tidy it up.
Big shout to Mark Sirota for his suggestions and bug testing on this.
Finally. If you want to add more menu items, I've included comments in the code on what to cut and paste. Remember to change where it says fifth to sixth with the pasted info and all will be fine. The comments are in both galleryMaker.xml and transformer.xslt.
If you use this gallery, please put a link to a sample gallery in the comments!
To install the gallery, you need to go to User/Library/Application Support/Adobe/Lightroom, (On XP got o C:\Documents and Settings\User\Application Data\Lightroom -Note that Application Data is a hidden folder, on Vista C:\Users\User\AppData\Roaming\Adobe\Lightroom\ ) where User is the name you log in with. Look for a folder called Web Galleries within. If it's not there, create it yourself. Unzip the file into this folder and restart Lightroom.
The new Gallery will apppear in the Right Hand Panel, in the Galleries Pane.
I recommend that you create an alias/shortcut to this Lightroom folder for future use.
posted by Sean McCormack at
7:58 AM
29 Comments:
I really like this gallery. One question I have about modifying it.
The bottom space below the bottom scroll bar is quite large in my opinion. How can I get it smaller?
Increase the size of the image?
http://www.timbroyer.com/New/
thanks and keep up the great work.
Tim
By
Tim Broyer, At
12:09 PM
That will do it to an extent Tim.
I'll also note that you can add ../eats/index.html etc,
to go up a gallery and back down to another one.
By
SeanMcC, At
3:37 PM
Is there a way to add menu items like this to other galleries?
By
Mike Guilbault, At
12:59 PM
Only HTML Galleries Mike.
For a small fee ;)
It was more about proof of concept Mike, and the code can be cut and pasted. It's quite repetitious codewise. As will all of these galleries there's a certain order to it:
First the code that defines the pages, then the code that lets you enter your own values, finally the code that binds them together in the galleryMaker.xml file. Then you need to call the results of the coding in the transformer.xslt. I'm not sure how much I commented on internally, but I've been adding more as I update. I'll porbably only release one more update on this gallery with a proper menu bar.
By
SeanMcC, At
2:10 PM
I really like this. One note: I would like to see the same spacing on the left edge as in between each image. I also really like the way you added menu items with fill in boxes. Hats off. I look forward to seeing other web galleries with this!! Please. A Wish. I use Photoshops Bridge Horizontal Neutral web gallery a lot but as you know it is not available in Lightroom. It would be great to see it in Lightroom with the menu items added
By
Gregg, At
1:00 AM
Sean,
Thanks very much, I like it a lot - extremely user-friendly. Keep it up!
www.markhout.com
By
Anonymous, At
7:40 PM
I like the concept of this gallery but since I have little or no experience with html I dont know how to setup the Menu links.I was able to do the links in your gallery index 1.1 Thank you for your great work....Ken
By
Ken, At
3:33 PM
Wow, how nice.
I have been playing around with this for a while now, and like it alot, but 2 things would improve it to superior. I would like to be able to se the filenames, eg just under the photos, and the ability to change the font, For now I'm not able to see the Nordic characters, and it takes quite some brain to try to avoid them ;-)
By
Uffe Hagen, At
6:26 PM
This is a fantastic gallery! Thank you Sean!
But... I have two questions. Is it possible to fully remove the menu bar. and second, is there any way, as in earlier versions, to not see your copyright notice on the bottom?
I just want to be able to easily lay this scroll gallery into a frame on each page of my existing website for easy updates right from LR, so I need it to be very simple.
Please let me know.
Thanks!
Arnie
By
Anonymous, At
5:45 AM
Did you say that there is a fixed height? From all of the web galleries I have seen on here, the horizontal images center themselves. Is there a way to get it fix so all the images will align at the top and bottom. If I put a vertical image next to a horizontal I want them to align from top to bottom. Let me know if there is a code I can use. Thanks!
By
Kayoua, At
6:46 PM
No, I said Lightroom applies the image size to both height and width,
If you edit the sizes part of galleryMaker.xml to a something like 600X400, it may keep a fixed height until you change the image size. When I figure out how to force a dimension I will add this to the gallery. As Lightroom need both a height and a width to work, I see no way how currently.
By
Sean, At
7:48 PM
Thanks Sean, I did it and it worked! Do you know how I can disable the right click?
By
Kayoua, At
10:40 PM
How much HTML do you know?
By
SeanMcC, At
2:06 AM
I did learn a little bit, but actually I don't remember any of it. When I was using the 'simple viewer' from Picasa, I was told to just put in a code 'right click = false' that is not the exact code, but it was something like that.
I figure I might need to do something similar for this gallery in the galleryMaker.xml file. I just don't know what is the code and where to put it exactly.
By
Kayoua, At
2:19 AM
It's a little more complicated than that.
You need to find a javascript file that will disable the right click. Then search for the <head> section in transformer.xslt and include it there as. You'll also need to include the file using a <filePath> tag in a gallery.xml file.
By
SeanMcC, At
2:27 AM
Hi Sean! Your gallery ROCKS! It is working great for me. The only thing I wish I knew how to do is disable the menu area completely, so as to have a plain white background with only the images and scroll bar area visible.
http://www.arnaldovargas.com/
Please let me know if there is an easy way to do this!
Thanks again!
Arnaldo
By
arnaldo1, At
6:41 PM
In the transformer.xslt there is a section between 2 ul tags. Delete these and everything inbetween to remove the Menu. There is also a Div tag that contains it. You may need to remove that too.
By
Sean, At
9:45 PM
Worked perfect Sean. I didn't even have to remove the Div tag. You are brilliant- Adobe should hire you! Thanks again!!!
Best -Arnaldo
By
arnaldo1, At
10:35 PM
Hey arnaldo1 and Sean, where is the file transformer.xslt. I only see the golive and xml file in the folder.
Also if I change the image menu 'gif' color, will it change too?
-Kayoua
By
Kayoua, At
3:39 AM
I really like this web template, but like kayoua, I want all my images to be the same height, and let the width be what it may. I don't have much experience with the gallery templates, but am familiar with XML, so I took a crack at it.
Edit galleryMaker.xml, and make the following changes. If you've made changes to this file already, then the line numbers may not be the same.
First, on line 26, change width="500" to width="2071" (the maximum value for the slider).
(sorry for the strange formatting to come)
Next, replace line 378 with these two lines:
<mx:NumericStepper ag:widthInDigits="4" ag:precision="0" id="imageWidthSlider" maximum="2071" minimum="300" stepSize="1" ag:style="sliderRow" ag:title="Image Width" ag:unit="px"/>
<mx:NumericStepper ag:widthInDigits="4" ag:precision="0" id="imageHeightSlider" maximum="2071" minimum="300" stepSize="1" ag:style="sliderRow" ag:title="Image Height" ag:unit="px"/>
Finally, replace lines 415-424 with these lines:
<mx:Binding destination="agmSizes.tracking" source="imageWidthSlider.tracking" />
<mx:Binding destination="imageWidthSlider.tracking" source="agmSizes.tracking" />
<mx:Binding destination="agmSizes.tracking" source="imageHeightSlider.tracking" />
<mx:Binding destination="imageHeightSlider.tracking" source="agmSizes.tracking" />
<mx:Binding destination="agmSizes.large.width" source="imageWidthSlider.value" />
<mx:Binding destination="agmSizes.large.height" source="imageHeigthSlider.value" />
<mx:Binding destination="imageWidthSlider.value" source="agmSizes.large.width" />
<mx:Binding destination="agmSizes.large.height" source="imageHeightSlider.value" />
<mx:Binding destination="imageHeightSlider.value" source="agmSizes.large.height" />
<mx:Binding destination="agmSizes.large.width" source="imageWidth.value" />
<mx:Binding destination="imageWidth.value" source="agmSizes.large.width" />
<mx:Binding destination="agmSizes.large.height" source="imageHeight.value" />
<mx:Binding destination="imageHeight.value" source="agmSizes.large.height" />
As long as the width slider is set to a sufficiently large value, all images will be the same height. But, it still allows for a limit to be placed on the width if desired.
By
Mike, At
3:50 AM
Hi Mike,
That's a very lateral approach to it. Nice work. I'll give this a try later.
As you may know, the format of the galleries is changing to a LUA based one. I think the underlying gallery is still XSLT/XML based, so these galleries and changes are still valid.
By
SeanMcC, At
11:50 AM
I'm trying to delete the black menu at the top like what arnaldo1 did,
Can anyone help me answer this question:
Where is the file transformer.xslt. I only see the golive and xml file in the folder?
Oh and thanks Mike, before I didn't even need to add all those coding, all I did was made the width much larger and it worked!
-Kayoua
By
Kayoua, At
3:54 PM
There are 5 files in the folder:
gallery.xml
galleryMaker.xml
menubg,gif
scroll.css
transformer.xslt
If you are seeing something else, then I have no idea what you are looking at.
By
SeanMcC, At
6:38 PM
kayoua, I originally just hardcoded a large width value as well, but if you change the size slider at all, it reverts back to the original behaviour. The only way to change the vertical size of the images in the gallery was to go back and change the code again.
With the changes I suggest, you have the option. You can still use the sliders, and you can get the original behaviour by setting the width slider to a lower value, or you can leave the width slider at the max, and it will ensure the images are all the same height.
You also have the option of putting a limit on the width, so that images will all be the same height, unless they become extremely wide. In that case, the width will be limited. This could be useful if you include some panoramic images in with the rest.
By
Mike, At
8:03 PM
W this look great, can't wait to get my fingers in it! I will post results as soon as I am there...
Best regards and great work!!!!
Charlotte
By
ch, At
10:16 AM
Hey does anyone know a code to stop others from stealing the pictures. I was able to find a code to stop the right click, however people are still able to drag the pictures to their desktop. Let me know thanks.
kxphotography.com/fashion/index.html
By
Kayoua, At
2:29 AM
If it's on the web, it can be taken. All it takes is a screen capture...
By
SeanMcC, At
2:38 AM
Great Job! I really wanted some thing easy and simple and not Flash! If people have iPhones they can't see your galleries, so this will be perfect.
I've made some adjustments like no menu, but sometimes I would like to be able to include captions or titles to individual photos. Is this possible with a simple fix?
Any suggestions would be greatly appreciated.
Once again thank you for sharing!!
Michael
By
MC, At
7:54 PM
This has been superceded by a number of galleries at this stage. This was posted in Oct 2007!
By
SeanMcC, At
8:36 PM
Post a Comment
<< Home