Photogallery in I-Frame

navaldesign · #1 02-16-2006, 11:18 PM

Hi everyone,

Many of us need a small, selfmade picture gallery, to embbed directly in our pages. BV provides a Photogallery featute, but it only allows for pics to pop up in a new or the same window. If you need to have them appear in a specific area of your page, or if you want to add comments, you can’t do it in BV. So here I will show you a way to create a small Photogallery of your own, that I have already presented in other threads in a rather summary way. It implicates creating the thumbs by your self, but at least you don’t have to use any script. It’s all done in BV, and you can use it in your own pages.

Suppose we have a page where we want to show both the thumbs and the single, enlarged picture.

Create an I-frame with the dimensions you want your picture to show. Double click on the frame to edit it and name it “photoframe”.It’s up to you to make it scrollable or not, with border or not.

Now , suppose you have ten pics in your computer. Using PIXResizer, resize them so they will load quickly. You will have to “play” a little, until you find which is the right size to get the i-frame completely filled. Suppose that this size is 400x300 pixels. Put 400X300 in PIX and save the first picture as pic1.jpg. Change the settings in PIXResizer to 60X45 and save again the same picture as a thumb, f.e. thumb1.jpg Go on and create pic2.jpg and thumb2.jpg and so on.

Now go in your page, double click on the I-frame, and in the URL field type in http://www.yourdomain.com/pic1.jpg. This way, when you open the page, the picture 1 will already appear in the frame.

Under the frame (or beside or wherever you want, ) put your thumbs. You do this by simply using the image tool. Make all your thumbs the same size, using the size tool. Use the alignment and spacing tools to put them in order. Double click on the thumb images, set if you want border and Alt. text. Then click on the Link Tool, and set the link from the thumbs to the images, setting the Target Field in “photoframe”. Insert the URL of the images in the URL field: for thumb1 the link will be:
http://www.yourdomain.com/pic1.jpg for the second thumb http://www.yourdomain.com/pic2.jpg
and so on.
Now you must upload the pic1.jpg , pic2.jpg …. files on your site. Do it using BlueFTP.
Last, publish your page. Test your photogallery.

An example of such a page, prepared for Lincslady, is in http://www.navaldesign.info/Linda/lindasindex.html

You can also use text links instead of thumbnails. If you have f.e. 10 pics, put under under the frame (or beside or wherever you want, ) the numbers 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. For each one, create a hyperlink to the .jpg file by highlighting the text and clicking on the Link tool. Remember to give “photoframe” as Target.. A real example:
http://www.goldenleaf-lighting.com/projects.html

What if you have more thumbs that can’t all get in a page? Simply, create another I frame, to get all the thumbs. Let’s call it “photoindex”. Now we have to do a small trick: Open a new page,put all your thumbs in a row (vertical or horizontal, depends on the “photoindex” frame orientation” and save it as “indexcontent” and publish it. An example of such a page can be seen here:
http://www.navaldesign.info/fotoindex_hull_nr_07.html
Set the initial openup URL for “photoindex” in http://www.yourdomain.com/indexcontent.html. Remember to establish the link between the thumbs and the images, setting the Target to “photoframe” as explained above. If you want, you can see this solution here:
http://www.navaldesign.info/Italiano/Progetti/Hull_Nr_07_18m_PRFV_Cianciolo_Algeria/fotogallery_hull_nr_07.html

Another tip: sometimes, your pictures are different sizes, or some are portrait, some landscape. Resizing the pictures and centering them in the "photoframe" might become a bit hard. You might also want to have a description or comments that go with the picture. Use BV to solve this to. Resize your pictures, not caring about fitting the “photoframe”. Then, create a rectangle. Make it same size as the “photoframe” using the Sizing Tool.. Copy it (Copy command) then delete it. Open a new page in BV, paste the rectangle, and (important) place it in the upper left corner of your screen. Now insert your pic1.jpg image, and center it in the rectangle. Add description and comments if you like. Publish the page as pic1.html. Do exactly the same, replacing the image with pic2.jpg, and publish as pic2.html Go on for all your pics. At this point you don’t need any more to upload the pic1.jpg ….. pic10.jpg files. You just publish the pic pages. Of course the thumb (or text) links must always be set with Target the “photoframe” and URL http://www.exampledomain.com/pic1.html and so on. The same goes for the initial openup page of the “photoframe”. It has to be set at http://www.exampledomain.com/pic1.html .

Frames and hyperlinks allow for great sites. For the next tip, we shall explain hw to create a menu bar in a frame, so that we don’t have to repeat it in all our pages.

Hope this has been useful.

RPW · #2 02-17-2006, 12:25 AM

Thanks Naval Design. I look forward to reading the next tip re menu bar in a frame.....

goldenleaf · #3 02-17-2006, 12:41 AM

Yea Thank You I appreciate your help. I try to do the same for others but honestly I just am not that good..

janset · #4 05-26-2006, 09:35 PM

thank you for your help i did it www.janset.org

navaldesign · #5 05-27-2006, 01:24 PM

Please note that if you download the new BV 8.0 there is a much more advanced gallery feature, which has the ability to open the thumbnails directly in the i frame

janset · #6 05-27-2006, 02:07 PM

http://support.vodahost.com/index.ph...itemid=1&nav=0 this is the link for BV 8.0?

navaldesign · #7 05-27-2006, 10:02 PM

Yes, correct

circuspet.com · #8 06-06-2006, 03:50 AM

I am trying to build a photo gallery-pet registry when complete it will contain thousands of thumnails with a click enlarge. Could the entire page be used as the enlarge frame as to not waste thumnail space?

navaldesign · #9 06-06-2006, 07:21 AM

In this case you don't need the I frame gallery. Just use directly the BV photogallery tool, using a popup window as target.

VodaHost · #10 06-06-2006, 08:58 AM

bump

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)