mtnbluet 0 Report post Posted July 15, 2007 So you've just downloaded the trial Adobe Photoshop CS2 and you have a bunch of pictures from an event or you just want to have a web gallery of pictures showing how to do something. What do you do? (Oh yes, you've heard about Ajax as being what people expect in a webpage, so you would like to include that too.) First, you need to modify the program files in Adobe Photoshop CS2 or rather you need to add a folder and put in it some Lightbox files. At the Lightbox Web Photo Gallery you will find an excellent tutorial to get you started. In a nutshell you will find the folder named Simple, duplicate it and rename it to Lightbox for simplicity sake. Or you can name it whatever you like just so you remember its name as it will appear as a Style in the Adobe Photoshop CS2 Web Gallery panel. (Refer to the above tutorial for the exact location of the Simple folder.) Also create a folder within the Lightbox folder and name it Images.Next you will want to download the Lightbox v1 files into the Images folder. (You will even find some Lightbox modifications at the huddletogether website, which will not be addressed here as this post is solely concerned with modifying the Web Gallery in Adobe Photoshop CS2.) Again, at the Lightbox Web Photo Gallery you can choose from a list of Web Photohop Gallery tokens provided. You need to provide an HTML skeleton for yourself and then add whatever tokens you want. Make sure you link any css files in the <head> section and call this new html file IndexPage.htm and place it in the Lightbox folder.Follow directions to modify the Thumbnail.htm, Caption.htm, SubPage.htm files in the Lightbox folder and lastly modify the lightbox.js file in the Images folder. To proceed to the final stages, open up Adobe Photoshop CS2 and click on Automate -> Web Gallery. You will see a Web Photo Gallery Panel appear. Now for the important selections:Select Lightbox as your Style and Browse to the location of your photos or images. Whatever folder you choose, make sure all of its contents are what you want in your Web Gallery as all these images will be included. Next choose the Destination for all the folders and htm files that the Photoshop Web Gallery will generate. This is also important as these folders that Photoshop generates are the very folders you will be putting up on your website. Now you can have fun with the Options area. By selecting General you can change those pesky extensions from .htm to .html at a whim. Selecting Banner allows you to choose the overall content for your site such as the Site title and date and name of the photographer, etc. ( And if you want more to choose from you need to go into your Lightbox folder and make the changes there.) Next, selecting Larger Images allows you to select the quality of your images. I would suggest you click off the check next to Filename as it will place the entire name of the file beneath the image-even the extension name. This may look strange, especially if you use numerical names for your images. Selection of Thumbnails allows you to size your Thumbnails from small to medium to large to a custom size where you would choose the pixels. Again unchecking the filename here might also be a good thing. However, if you used good descriptive phrases in your filename, then you might want to try it checked. Also, when selecting Custom Colors you can easily modify your css values such as Text, Link, Active link, and Visited Link. Pressing OK automates the making of your Web Gallery, but two final aspects are needed if you want captions next to your images after they are selected and you want a way to navigate between the Web Gallery webpages that are produced. First go to your Destination folder. Here you will see index html pages. They are labeled index, 2nd index, 3rd index and so forth. These are your Web Gallery webpages. Now open them up in an Html editor like HtmlKit and add your caption to each images title="Caption goes here" and save the file. Do this for each image and each Web Gallery webpage and, voila, you have your captions added to each of the images. These images will be seen either as tooltips when you hover over a picture, or at the bottom of the picture after you have clicked on it to enlarge it. Lastly, add another js file to this folder. Mine is called a.js. You can see the code below (make all your necessary personal substitutions):document.write('<style type="text/css" title="HomePageNavigationStyle" media="screen">#HomePageNavigationBar_1 #D_1,#HomePageNavigationBar_2 #D_2,#HomePageNavigationBar_3 #D_3,#HomePageNavigationBar_4 #D_4{text-decoration:none;font-weight:bold;}</style>');document.write('<A id="D_1" href="http://lygo.com/ly/sitemissing.html One</A>\n <A href="#" style="text-decoration:none">|</A> \n<A id="D_2" href="http://lygo.com/ly/sitemissing.html Two</A>\n <A id="D_3" href="http://lygo.com/ly/sitemissing.html Three</A>\n <A href="#" style="text-decoration:none">|</A> \n<A id="D_4" href="http://lygo.com/ly/sitemissing.html Four</A>');Now go to any of the above Web Gallery pages and look between the container id and the stats id in the beginning of the body of the Html page. Here you will find the corresponding code for the Navigation Bar wrapper. Substitute for your webpages and you can now navigate between all your Web Gallery webpages. ( I will say this, that on my webpages, this navigation bar setup is not perfect yet.) So with these simple modifications you can use Adobe Photoshop CS2 to automate the making of a Web Gallery for you in short order and you also allow the viewer the ability to close the image without pressing the back button on the top of the web browser, which is so often the case. This is the beginning of using Ajax features in your Web Gallery. As you continue to modify it, it will appear more and more ajax-like. Now, you can have your cake and eat it too. Share this post Link to post Share on other sites
FirefoxRocks 0 Report post Posted November 17, 2007 What is wrong with using plain old HTML, JavaScript and CSS with the Lightbox script to display the images? I find that there is more control over that than following all of this instruction. Share this post Link to post Share on other sites
