HTML & Gadgets‎ > ‎

Image Galleries

Picasa Web Slideshow

posted Jul 31, 2011, 10:45 AM by Morteza Mirmojarabian   [ updated Feb 7, 2015, 10:41 AM ]

Picasa Web Albums provides free storage to upload and share your photos. It also creates a Flash slideshow of any web album to embed into your site. The slideshow automatically gets updated when you make changes to your album.

Instructions
  • Go to your Picasa Web Albums and open the desired one ► click Link to this albumEmbed Slideshow ► customize and copy the embed code. For example:
    <embed type="application/x-shockwave-flash" src="https://photos.gstatic.com/media/slideshow.swf" width="288" height="192" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F106672793879600277650%2Falbumid%2F5628100535167342321%3Falt%3Drss%26kind%3Dphoto%26hl%3Den_US" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Notes:
  1. By default each image is displayed for three seconds. If you'd like to change it to five seconds, for example, add interval=5& to the flashvars value:
    interval=5&host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https.....
  2. If you'd like a red background, for example, change 000000 to FF0000:
    host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0xFF0000&feed=https.....
    It can be any hex color code.
  • Get back to your Google Site ► click Edit pageInsertMore gadgetsPublic ► Search gadgets: "Flash Wrapper" by Mori ► Select ► enter the SWF URL and flashvars value ► customize the gadget DisplayOKSave.

Example

DiscussPlease note that all posts are moderated.

Thumbnail Viewer

posted Mar 21, 2010, 10:36 PM by Morteza Mirmojarabian   [ updated Feb 5, 2014, 12:08 AM ]

Picasa Web slideshow is very nice, but it's not the only way to display your images on Google Sites. You can easily create a highly customizable photo gallery.


Instructions
  • Use Dynamic Content Writer to customize the following code and monitor changes in real time:
    <!DOCTYPE html>
    <style type="text/css">
    body {margin:0; padding:0;}
    #large {display:table-cell; width:458px; height:346px;  /* The width and height values should be equal to the largest width and height values in your images + large image padding:10px. */
    vertical-align:middle; text-align:center; background:#000000;}
    #largeImage {vertical-align:bottom; padding:5px;}
    #thumbs {width:458px; overflow:auto; background:#000000;}
    ul {list-style:none; margin:0; padding:0; border-spacing:5px;}
    li {display:table-cell;}
    li a, li a img {display:block; width:80px; height:60px; border:0;}
    li a {padding:1px;}
    li a:hover, li a:focus {outline:1px solid #808080;}
    li a.active {outline:1px solid #FFFFFF;}
    </style>
    <div id="large"><img id="largeImage" src="http://www.example.com/image1.jpg"></div>
    <div id="thumbs">
    <ul>
    <li><a href="http://www.example.com/image1.jpg" class="active"><img src="http://www.example.com/thumbnail1.jpg"></a></li>
    <li><a href="http://www.example.com/image2.jpg"><img src="http://www.example.com/thumbnail2.jpg"></a></li>
    <li><a href="http://www.example.com/image3.jpg"><img src="http://www.example.com/thumbnail3.jpg"></a></li>
    </ul>
    </div>
    <script type="text/javascript">
    function setImage(el) {
    document.getElementById('largeImage').src = '' + el.href + '';
    }
    function setClass(el) {
    for (var i = 0; i < document.links.length; i++) {
    document.links[i].className = '';
    }
    el.className = 'active';
    }
    for (var i = 0; i < document.links.length; i++) {
    document.links[i].onclick = function () {setImage(this); setClass(this); return false;};
    }
    </script>
Note: Would you like to view thumbnails when mousing over / tabbing to them? Then replace
document.links[i].onclick = function () {setImage(this); setClass(this); return false;};
with
document.links[i].onclick = function () {return false;};
document.links[i].onmouseover = function () {setImage(this); setClass(this);};
document.links[i].onfocus = function () {setImage(this); setClass(this);};
and change the following line
li a:hover, li a:focus {outline:1px solid #808080;}
to
li a {outline:0;}

Example



Note: You might want to add a title/tooltip to your images, like the sixteenth image in my demo gallery:
<li><a href="http://www.example.com/image16.jpg" title="Dog in Love"><img src="http://www.example.com/thumbnail16.jpg"></a></li>
Alternatively you can put a plain text/link caption underneath them:
<!DOCTYPE html>
<style type="text/css">
body {margin:0; padding:0;}
#large {display:table-cell; width:458px;  /* The width value should be equal to the largest width value in your images + large image padding:10px. */
height:381px;  /* i.e. the largest height value in your images + large image padding:10px + caption division height:15px + 20px padding */
vertical-align:middle; text-align:center; background:#000000;}
#largeImage {vertical-align:bottom; padding:5px;}
#caption {height:15px;  /* Allow 15px for each line of caption. */
padding:5px 5px 15px; text-align:center; word-wrap:break-word; font:12px Arial; color:#FFFFFF;}
#caption a {color:inherit; outline:0;}
#caption a:hover, #caption a:focus {text-decoration:none;}
#thumbs {width:458px; overflow:auto; background:#000000;}
ul {list-style:none; margin:0; padding:0; border-spacing:5px;}
li {display:table-cell;}
li a, li a img {display:block; width:80px; height:60px; border:0;}
li a {padding:1px;}
li a:hover, li a:focus {outline:1px solid #808080;}
li a.active {outline:1px solid #FFFFFF;}
</style>
<div id="large"><img id="largeImage" src="http://www.example.com/image1.jpg"><div id="caption">First image caption</div></div>
<div id="thumbs">
<ul>
<li><a data-text="First image caption" data-link="" href="http://www.example.com/image1.jpg" class="active"><img src="http://www.example.com/thumbnail1.jpg"></a></li>
<li><a data-text="Second image caption" data-link="http://www.example.com/" href="http://www.example.com/image2.jpg"><img src="http://www.example.com/thumbnail2.jpg"></a></li>
<li><a data-text="" data-link="" href="http://www.example.com/image3.jpg"><img src="http://www.example.com/thumbnail3.jpg"></a></li>
</ul>
</div>
<script type="text/javascript">
function setImage(el) {
document.getElementById('largeImage').src = '' + el.href + '';
}
function setCaption(el) {
var caption = document.getElementById('caption');
var text = el.getAttribute('data-text');
var link = el.getAttribute('data-link');
if (link) {
caption.innerHTML = '<a href="' + link + '" target="_blank">' + text + '<\/a>';}
else {
caption.innerHTML = '' + text + '';}
}
var links = document.getElementById('thumbs').getElementsByTagName('a');
function setClass(el) {
for (var i = 0; i < links.length; i++) {
links[i].className = '';
}
el.className = 'active';
}
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {setImage(this); setCaption(this); setClass(this); return false;};
}
</script>
  • Gadget dimensions:
    Width: 458 pixels
    Height: 470 pixels   (large division height:381px + 60px thumbnails height + 2px links padding + 10px border spacing + 17px scrollbar height)

Example



  • Take similar steps with the following code if you'd like to set the thumbnails division vertically:
    <!DOCTYPE html>
    <style type="text/css">
    body {margin:0; padding:0;}
    #parent {overflow:hidden;}
    #left {float:left;}
    #large {display:table-cell; width:458px; height:346px;  /* The width and height values should be equal to the largest width and height values in your images + large image padding:10px. */
    vertical-align:middle; text-align:center; background:#000000;}
    #largeImage {vertical-align:bottom; padding:5px;}
    #thumbs {width:109px;  /* i.e. 80px thumbnails width + 2px links padding + 10px border spacing + 17px scrollbar width */
    height:346px; float:left; overflow-x:hidden; overflow-y:auto; background:#000000;}
    ul {list-style:none; margin:0; padding:0; border-spacing:5px;}
    li {display:table-row;}
    li a, li a img {display:block; width:80px; height:60px; border:0;}
    li a {padding:1px;}
    li a:hover, li a:focus {outline:1px solid #808080;}
    li a.active {outline:1px solid #FFFFFF;}
    </style>
    <div id="parent">
    <div id="left">
    <div id="large"><img id="largeImage" src="http://www.example.com/image1.jpg"></div>
    </div>
    <div id="thumbs">
    <ul>
    <li><a href="http://www.example.com/image1.jpg" class="active"><img src="http://www.example.com/thumbnail1.jpg"></a></li>
    <li><a href="http://www.example.com/image2.jpg"><img src="http://www.example.com/thumbnail2.jpg"></a></li>
    <li><a href="http://www.example.com/image3.jpg"><img src="http://www.example.com/thumbnail3.jpg"></a></li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    function setImage(el) {
    document.getElementById('largeImage').src = '' + el.href + '';
    }
    function setClass(el) {
    for (var i = 0; i < document.links.length; i++) {
    document.links[i].className = '';
    }
    el.className = 'active';
    }
    for (var i = 0; i < document.links.length; i++) {
    document.links[i].onclick = function () {setImage(this); setClass(this); return false;};
    }
    </script>
  • Gadget dimensions:
    Width: 567 pixels   (large division width:458px + 80px thumbnails width + 2px links padding + 10px border spacing + 17px scrollbar width)
    Height: 346 pixels

Example



And here's its captioned version:
<!DOCTYPE html>
<style type="text/css">
body {margin:0; padding:0;}
#parent {overflow:hidden;}
#left {float:left;}
#large {display:table-cell; width:458px;  /* The width value should be equal to the largest width value in your images + large image padding:10px. */
height:386px;  /* i.e. the largest height value in your images + large image padding:10px + caption division height:15px + 25px padding */
vertical-align:middle; text-align:center; background:#000000;}
#largeImage {vertical-align:bottom; padding:5px;}
#caption {height:15px;  /* Allow 15px for each line of caption. */
padding:5px 5px 20px; text-align:center; word-wrap:break-word; font:12px Arial; color:#FFFFFF;}
#caption a {color:inherit; outline:0;}
#caption a:hover, #caption a:focus {text-decoration:none;}
#thumbs {width:109px;  /* i.e. 80px thumbnails width + 2px links padding + 10px border spacing + 17px scrollbar width */
height:386px; float:left; overflow-x:hidden; overflow-y:auto; background:#000000;}
ul {list-style:none; margin:0; padding:0; border-spacing:5px;}
li {display:table-row;}
li a, li a img {display:block; width:80px; height:60px; border:0;}
li a {padding:1px;}
li a:hover, li a:focus {outline:1px solid #808080;}
li a.active {outline:1px solid #FFFFFF;}
</style>
<div id="parent">
<div id="left">
<div id="large"><img id="largeImage" src="http://www.example.com/image1.jpg"><div id="caption">First image caption</div></div>
</div>
<div id="thumbs">
<ul>
<li><a data-text="First image caption" data-link="" href="http://www.example.com/image1.jpg" class="active"><img src="http://www.example.com/thumbnail1.jpg"></a></li>
<li><a data-text="Second image caption" data-link="http://www.example.com/" href="http://www.example.com/image2.jpg"><img src="http://www.example.com/thumbnail2.jpg"></a></li>
<li><a data-text="" data-link="" href="http://www.example.com/image3.jpg"><img src="http://www.example.com/thumbnail3.jpg"></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function setImage(el) {
document.getElementById('largeImage').src = '' + el.href + '';
}
function setCaption(el) {
var caption = document.getElementById('caption');
var text = el.getAttribute('data-text');
var link = el.getAttribute('data-link');
if (link) {
caption.innerHTML = '<a href="' + link + '" target="_blank">' + text + '<\/a>';}
else {
caption.innerHTML = '' + text + '';}
}
var links = document.getElementById('thumbs').getElementsByTagName('a');
function setClass(el) {
for (var i = 0; i < links.length; i++) {
links[i].className = '';
}
el.className = 'active';
}
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {setImage(this); setCaption(this); setClass(this); return false;};
}
</script>
  • Gadget dimensions:
    Width: 567 pixels   (large division width:458px + 80px thumbnails width + 2px links padding + 10px border spacing + 17px scrollbar width)
    Height: 386 pixels

Example


DiscussPlease note that all posts are moderated.

Photo Filmstrip

posted Mar 8, 2010, 9:16 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:44 PM ]

If you're going to easily insert your images or their linked thumbnails into your page and create a gallery without a gadget, then Photo Filmstrip is for you.


Instructions

  • Use Dynamic Content Writer to customize the following code and monitor changes in real time:
    <div style="width:100%; background:#DEB887; white-space:nowrap; overflow:auto;">
    <div style="display:inline-block; margin:5px 4px; border:dotted #320000; border-width:7px 0; padding:4px 0;">

    <a href="http://www.example.com/image1.jpg" target="_blank"><img src="http://www.example.com/thumbnail1.jpg" style="width:80px; height:60px; border:0; vertical-align:bottom;"></a>

    <a href="http://www.example.com/image2.jpg" target="_blank"><img src="http://www.example.com/thumbnail2.jpg" style="width:80px; height:60px; border:0; vertical-align:bottom;"></a>

    </div>
    </div>
Note: You might want to add a title/tooltip to your images, like the sixteenth image in my demo gallery:
<a href="http://www.example.com/image16.jpg" target="_blank" title="Dog in Love"><img src="http://www.example.com/thumbnail16.jpg" style="width:80px; height:60px; border:0; vertical-align:bottom;"></a>
  • Click Edit pageHTML button ► insert the code ► click UpdateSave.
Example







Even simpler? Take similar steps to display your images in their original sizes with no styles.
  • Click Edit page ► HTML button ► insert the following code and customize it:
    <div style="width:100%; overflow:auto; white-space:nowrap;">

    <img src="http://www.example.com/image1.jpg">

    <img src="http://www.example.com/image2.jpg">

    </div>
  • Click Update ► Save.
Example


DiscussPlease note that all posts are moderated.

1-3 of 3