Results 1 to 10 of 10

Thread: Photogallery in I-Frame
      
   

  1. #1
    navaldesign's Avatar
    navaldesign is offline General & Forum Moderator
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,082

    Default Photogallery in I-Frame

    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.
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  2. #2
    RPW
    RPW is offline Staff Sergeant
    Join Date
    Jan 2006
    Location
    Dublin, Ireland
    Posts
    49

    Default Re: Photogallery in I-Frame

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

  3. #3
    goldenleaf's Avatar
    goldenleaf is offline Sergeant First Class
    Join Date
    Jan 2006
    Location
    Philadelphia, PA
    Posts
    59

    Default Re: Photogallery in I-Frame

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

  4. #4
    janset's Avatar
    janset is offline Sergeant
    Join Date
    May 2006
    Location
    Turkey
    Posts
    24

    Default Re: Photogallery in I-Frame

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

  5. #5
    navaldesign's Avatar
    navaldesign is offline General & Forum Moderator
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,082

    Default Re: Photogallery in I-Frame

    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
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  6. #6
    janset's Avatar
    janset is offline Sergeant
    Join Date
    May 2006
    Location
    Turkey
    Posts
    24

    Default Re: Photogallery in I-Frame


  7. #7
    navaldesign's Avatar
    navaldesign is offline General & Forum Moderator
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,082

    Default Re: Photogallery in I-Frame

    Yes, correct
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  8. #8
    circuspet.com's Avatar
    circuspet.com is offline Brigadier General
    Join Date
    Feb 2006
    Location
    LA HABRA, CA
    Posts
    1,104

    Lightbulb Re: Photogallery in I-Frame

    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?

  9. #9
    navaldesign's Avatar
    navaldesign is offline General & Forum Moderator
    Join Date
    Oct 2005
    Location
    Italy
    Posts
    12,082

    Default Re: Photogallery in I-Frame

    In this case you don't need the I frame gallery. Just use directly the BV photogallery tool, using a popup window as target.
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  10. #10
    VodaHost's Avatar
    VodaHost is offline General & Forum Administrator
    Join Date
    Mar 2005
    Location
    Wilmington, Delaware USA
    Posts
    11,690

    Default Re: Photogallery in I-Frame

    bump

    VodaHost

    Your Website People!
    1-302-283-3777 North America / International
    02036089024 / United Kingdom
    291916438 / Australia

    ------------------------

    Top 3 Best Sellers

    Web Hosting - Unlimited disk space & bandwidth.

    Reseller Hosting - Start your own web hosting business.

    Search Engine & Directory Submission - 300 directories + (Google,Yahoo,Bing)



Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49