Can I make my images pop up?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Can I make my images pop up? e.g. like when viewing facebook photos, there are thumbnails and when you click a photo it pop up to the front and you can click next
Photo of Den

Den

  • 32 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hello Den,

You can add a pop-up window to your site but you need to add some HTML.

This is how you would do it.

1. Go to www.htmlbasix.com/popup.shtml.
2. Edit the settings you would like to use for the pop-up window.
3. In the section that asks for the URL, you would need to add an already made webpage URL (you can create this on your own site or use another site's URL). If you would like to use your own page, you can click on "Add Page" and make sure that you've unticked the "Include in Navigation" box so that a link does not display in your navigation.
4. Click on "generate code".
5. Copy the first section of code and add an HTML Widget to the page and paste the HTML into the HTML editor that opens.
6. Copy the second section of code and add a second HTML Widget underneath the first, then paste the code into the editor that opens.
7. Republish your site by clicking on the green "Publish to the web" button.

Someone on the forum might have a better option for you but this is the one we generally use.

I hope this helps.
Photo of Den

Den

  • 32 Posts
  • 0 Reply Likes
Hi Jeremy, thanks for the response. I was looking more at having a gallery pop up, similar to that of facebook & other pages I have seen, where you can see thumbnails, click and the photo will pop up larger and can click next photo on the actual pop up.

I thought I might be able to do it with Flickr however I received an email warning me that I can not use their slideshow for commerial purposes, therefore it defeats the whole purpose of having my website lol
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Den,

Thanks for the further information in regards to your request. You can certainly create clickable thumbnails, here's how:
1. Upload the thumbnails (these are the small versions of your pictures) and the corresponding full-sized photos into the File Manager.
2. Drag and drop a Text Widget on to your page and add the thumbnails by clicking on the "Picture" button (the one with the green tree) on the Text Editing Toolbar.
3. Click on the "Add Page" button. Name it something logical like "photo1" and be sure that the "Show in Navigation" box is NOT checked. Your new and empty page will load up ready for you to add the corresponding photograph. Add your large-sized picture to this page using a Picture Widget.
4. To make the thumbnail link to the full-sized image, click on the thumbnail picture. Then choose the "Link" button on the Text Editing Toolbar.
5. The Link Editor will open up. It will allow you to create a link to the relevant page. Browse for the page you want and click "OK".
6. Save and republish your site so that your changes will be reflected on your live site.

Another option would be incorporating a Flickr gallery (as you have mentioned). We have a tutorial set up with further steps in doing that here: Flickr Galleries.

I hope you find this helpful, Den! Please let us know if you need further assistance.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Den,

I would suggest that you use a Visual Lightbox gallery because it allows you to simply add a Facebook style gallery.

Their website is here... http://visuallightbox.com/
An example of it in use is here... http://www.shamrockandrambler.co.uk/g...

And I have created a guide on how to create a Visual Lightbox gallery. It should be easy to follow. Here is the guide... http://www.mangopearmedia.com/resourc...

If you need any more help, please do not hesitate to reply,

Kind Regards,
Andi
Photo of Matt Chadwick

Matt Chadwick

  • 14 Posts
  • 1 Reply Like
Hi Andi, have followed the walk through right up to changing the CSS, but i cant see where i can find the URL's of my files on the file manager?

I realise i have probably missed something, but am a bit new to this still! Hope you can help

Many thanks

Matt
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Matt, in file manager right click on your chosen images, select view and the url for the image will be in your browsers location bar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Make sure that you only use the URL from resources/... because otherwise it will only work for you on your computer!

i.e. resources/images/123.png
instead of: http://sitebuilder.yola.com/...some numbers .../resources/images/123.png

Andi
Photo of Matt Chadwick

Matt Chadwick

  • 14 Posts
  • 1 Reply Like
Looks like i cant use this as it wont let me upload HTML unless i upgrade to silver! Boooo!

Just spent ages editing the HTML code too!

Will have to find some other ways to continue improving my site!

Thanks for the replies
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Open the CSS File on your computer and Copy and Paste all of it instead of the link. (Except the <!--- and --->)

i.e. - (CSS Code here)

Do the same for the Java i.e.

Or find a file hosting system and host them there.

Andi