Hello all, I am sorry if this is not the proper section for this, but I am looking for a way to revamp my image gallery, and have tried multiple places to find this answer. I manage a small company's website, and would like to make the image galleries look better. I found this: http://smoothgallery.jondesign.net/showcase/gallery/ and would like to use it for my site. This is my site now: http://www.stonezoneco.com/trialpics.html I would like to replace this with the script provided by smoothgallery, but am unsure as to how to go about doing something like this. I downloaded what the site provided, but I haven't a clue how to institute it. Any help that can be given would be greatly appreciated, especially in the form of step-by-step instructions. I do not know how to utilize the .js scripts, or why I needed to download files if they are just lines of code...very confused. Thanks in advance for any help!
Hello, You have had to download the files as the lines of code will tell the browser what to do with your pictures. Firstly which set of files did you download? If you tell me that I can set up the same gallery and explain step by step for you. Thanks, Phil
Toycel, Thanks for the reply. I downloaded the first option on this page: http://smoothgallery.jondesign.net/download/
Right this is the code from the Demo.htm page so this will need editing to suit your needs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JonDesign's SmoothGallery demo</title> <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" /><!--these 5 CSS and JS files are in the zip file and need to be put on your server--> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" /> <script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> </head> <body> <h1> <a href="http://english.jondesign.net/"> <span class="company">JonDesign's</span> </a>SmoothGallery 2.1beta1 <sup>demo</sup></h1><!--anything in the H1 can be removed from this as this is the header for the demo page--> <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready',startGallery); </script> <div class="content"> <div id="myGallery"> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /><!--The images need to be changed to your images--> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/2.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 3 Title</h3> <p>Item 3 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/3.jpg" class="full" /> <img src="images/brugges2006/3-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 4 Title</h3> <p>Item 4 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/4.jpg" class="full" /> <img src="images/brugges2006/4-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 5 Title</h3> <p>Item 5 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/5.jpg" class="full" /> <img src="images/brugges2006/5-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 6 Title</h3> <p>Item 6 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/6.jpg" class="full" /> <img src="images/brugges2006/6-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 7 Title</h3> <p>Item 7 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/7.jpg" class="full" /> <img src="images/brugges2006/7-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 8 Title</h3> <p>Item 8 Description</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/8.jpg" class="full" /> <img src="images/brugges2006/8-mini.jpg" class="thumbnail" /><!--If you need any more images then you can add to this in the same fashion--> </div> </div> </div> </body> </html> Code (markup): Once you have unzipped the folder you will need to create three folders on your server (one for the css, one for the scripts and one for the images). Create your gallery page and position the Mygallery div in the right place, if all the URLs are pointing to the right places then you should have the gallery up and running
Do the css, scripts, and images need to be in specific folders with specific names? Or can I upload everything to my public.html portion of the site? Also, if my images are already uploaded, do they need to be moved to a folder, or can I just change the file names to my specific image names/locations?
All the files can be put where ever you want to put them as long as in the code they are linked correctly so on the example rather than 'images/brugges2006/4.jpg' it would just be '4.jpg' the same with the scripts and CSS files too. They are just in folders here so that you can manage the back end of the site a little easier
got it to function...apparently I just needed to put the scripts and css files in folders just like the were downloaded
so now, from here, is there anyway I can alter this code somewhat to do the following: I want to make the description bigger... I'd like to make the picture slightly bigger, (I would like it to take up the majority of the screen) Can I make it so when I click on the "Open image" light bulb symbol in the middle of the pic, it links to the picture?
Yes there is. You would need to edit the CSS and the widths in JS to create a bigger image. I'll have a play today and post later
Hey have done this as a priority this morning. If you open the 'jd.gallery.css' file you can change the width and height of the gallery in this section it is right at the top of the css file. #myGallery, #myGallerySet, #flickrGallery { width: 600px; height: 450px; z-index:5; border: 1px solid #000; } Code (markup): to make the caption bigger you need to edit these sections: .jdGallery .slideInfoZone { position: absolute; z-index: 10; width: 100%; margin: 0px; left: 0; bottom: 0; height: 50px; background: #333; color: #fff; text-indent: 0; overflow: hidden; } * html .jdGallery .slideInfoZone { bottom: -1px; } .jdGallery .slideInfoZone h2 { padding: 0; font-size: 200%; margin: 0; margin: 2px 5px; font-weight: bold; color: inherit; } .jdGallery .slideInfoZone p { padding: 0; font-size: 150%; margin: 2px 5px; color: #eee; } Code (markup): Changing the font size will obviously make it bigger but you also need to change the height of the .jdgallery .slideinfozone div to make it fit right too. Lastly the Open image is just a link in the HTML code <div class="imageElement"> <h3>Picture 1</h3> <p>This is a picture of a furry man</p> <a href="#" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> Code (markup): If you change the 'a href' from a hash tag to the URL of the image it should open that image. Cheers, Phil
The JS scripts you shouldn't need to play around with much. I use Notepad++ that is a free text editor for the code, there are others out there too.