this gallery trick requires its own page. this page will be embedded into the page where you want to have your gallery.
1. create a page called 'gallery' (or whatever, just remember it)
2. upload your pictures to that page, and position those the way you want your 'gallery' to look like
3. go to 'code' mode (replace 'edit' with 'code' in the address bar or use 'add/edit custom code' button) and add the following code to the 'head' section:
<style>
div[class*='image'] {
border:5px solid grey;
}
div[class*='image']:hover {
border:5px solid orange;
cursor: pointer;
z-index:1000 !important;
}
</style>
then hit 'save'
5. go back to the page where you want to have the gallery on and click the 'embed another webpage' button (single-click menu); enter the name of your gallery page, in our case it is 'gallery' (no quotes)
6. viola!
this gallery is a bit more tricky. it also requires its own page. for this gallery the order in which the pictures are uploaded is important. each image needs to be uploaded first and then a thumbnail (the preview image) needs to be created using 'clone' option.
1. create a page called 'gallery' (or whatever, just remember it)
2. upload an picture
3. make a 'clone' of it using the menu
4. resize the original picture to the desired size of a thumbnail (preview) and position it as you want (in our example it is a simple grid)
5. link the thumbnail image ('make the object a link' menu option) to any arbitrary anchor name ('#name', no quotes)
6. position the bigger version of the image at a place where you would like it to appear on the page (notice that the large pictures will appear above the preview images)
7. repeat the steps for all images which you would like to have in your gallery
8. go to 'code' mode (replace 'edit' with 'code' in the address bar or use 'add/edit custom code' button) and add the following code to the '<head>' section:
<style>
div[class*='image'] {
border: 5px solid lightgrey;
}
a:active+div, a+div:hover {
display:block;
position: relative;
cursor: pointer;
border: 5px solid grey;
z-index:1000 !important;
}
a+div, a+div:active {
display:none;
}
</style>
then hit 'save'
9. go back to the page where you want to have the gallery on and click the 'embed another webpage' button (single-click menu); enter the name of your gallery page, in our case it is 'gallery' (no quotes)
10. viola!