An Unnecessarily Complicated Slideshow For Blogger...

After watching Rail Wars, which depicts a whole host of trains and locales, I felt a need to provide some thumbnails from the series. That would mean loading 48 images every time the page is loaded, even if no one was interested in seeing all of the images. After looking into a Variety of CSS-based Slideshow Gadgets, a common theme that emerged with existing slideshow gadgets, was the need to load all of the images at one time. To keep the slideshow's footprint relatively small, I really wanted to avoid loading all of the slideshow images at one time, if at all possible.

Using a Related Post gadget as a starting point, I developed the unnecessarily complicated slideshow gadget shown below that will use my own version of lazy loading to only load one image at a time and wait for the user to select the previous or next links, before loading another image:

<script type="text/javascript">
var d=document;
var divs;
var slideshowcontent='';
var iCountDivs=0;
var maxSlides = 0;
//Count the number of slides
for (var n=0;n<divs.length;n++){
if(divs[n].getAttribute('tag')=='slideshowitem'){
maxSlides+=1;
}}
//Initialize the slideshow
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute('tag')=='slideshowcontent'){
var ts = new String(divs[i].innerHTML);
if (ts.length < 20){
for (var n=0;n<divs.length;n++){
if(divs[n].getAttribute('tag')=='slideshowitem'){
if (iCountDivs==0){
var pageurl = divs[n].getAttribute('pageurl').replace('http:', 'https:');
var pagemode = new String(divs[n].getAttribute('pagemode'));
if (pagemode=="lightbox") {
slideshowcontent+='<div class="photo-box"><a class="photo-overlay-container" href="javascript:nolink();" onclick="show_lightbox('+"'"+pageurl+"'"+');"><img border="0" height="'+divs[n].getAttribute('imgheight')+'" src="'+divs[n].getAttribute('imgurl').replace('http:', 'https:')+'" width="'+divs[n].getAttribute('imgwidth')+'"><span class="photo-overlay">1 of ' + new String(maxSlides) + '<br/>'+divs[n].getAttribute('pagetitle')+'</span></a><span class="ssprev" onclick="do_slidechange(-1);" title="Previous">&lt;</span><span class="ssnext" onclick="do_slidechange(1);" title="Next">&gt;</span></div>';
} else {
slideshowcontent+='<div class="photo-box"><a class="photo-overlay-container" href="'+pageurl+'"><img border="0" height="'+divs[n].getAttribute('imgheight')+'" src="'+divs[n].getAttribute('imgurl').replace('http:', 'https:')+'" width="'+divs[n].getAttribute('imgwidth')+'"><span class="photo-overlay">1 of ' + new String(maxSlides) + '<br/>'+divs[n].getAttribute('pagetitle')+'</span></a><span class="ssprev" onclick="do_slidechange(-1);" title="Previous">&lt;</span><span class="ssnext" onclick="do_slidechange(1);" title="Next">&gt;</span></div>';
}
}//if
iCountDivs+=1;
}//if
}//for n
if (iCountDivs>0){
for (var j=0;j<divs.length;j++){
if(divs[j].getAttribute('tag')=='slideshowcontent'){
divs[j].setAttribute('index', '0');
divs[j].setAttribute('length', new String(iCountDivs));
if (iCountDivs<=1) {
slideshowcontent=slideshowcontent.replace("ssprev","dontshow").replace("ssnext","dontshow");;
}
divs[j].innerHTML=slideshowcontent;
break;
}}}}}

function show_lightbox(imgurl){
var d=document;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute('tag')=='slideshowcontent'){
var alb = divs[i].getElementsByTagName("a");
alb[0].setAttribute("onclick","hide_lightbox()");
var ilb = divs[i].getElementsByTagName("img");
ilb[0].setAttribute("src",imgurl);
ilb[0].setAttribute("height","100%");
ilb[0].setAttribute("width","100%");
var spd = divs[i].getElementsByTagName("span");
spd[1].setAttribute("class","dontshow");
spd[2].setAttribute("class","dontshow");
break;
}}}

function hide_lightbox() {
var d=document;
do_slidechange(0);
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute('tag')=='slideshowcontent'){
var spd = divs[i].getElementsByTagName("span");
spd[1].setAttribute("class","ssprev");
spd[2].setAttribute("class","ssnext");
break;
}}}

function nolink(){}

function do_slidechange(slideoffset) {
//Change the slide
var d=document;
var divs;
var slideshowcontent='';
var curSlide=-1;
var maxSlides=0;
var seekSlide=0;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute('tag')=='slideshowcontent'){
curSlide=parseInt(divs[i].getAttribute('index'));
maxSlides=parseInt(divs[i].getAttribute('length'));
seekSlide=curSlide+slideoffset;
if(seekSlide<0){seekSlide=maxSlides-1;} 
if(seekSlide>=maxSlides){seekSlide=0;} 
var iCountDivs=0;
for (var n=0;n<divs.length;n++){
if(divs[n].getAttribute('tag')=='slideshowitem'){
if (iCountDivs==seekSlide) {

var photo_overlay_container = divs[i].getElementsByTagName('a')[0];
var pageurl = divs[n].getAttribute('pageurl').replace('http:', 'https:');
var pagemode = new String(divs[n].getAttribute('pagemode'));
if (pagemode=="lightbox") {
photo_overlay_container.setAttribute("href", "javascript:nolink();");
photo_overlay_container.setAttribute("onclick", "show_lightbox('"+pageurl+"');");
} else {
photo_overlay_container.setAttribute("href", divs[n].getAttribute('pageurl').replace('http:', 'https:'));
photo_overlay_container.setAttribute("onclick", "");
}

var photo_overlay_image = divs[i].getElementsByTagName('img')[0];
photo_overlay_image.setAttribute('src',divs[n].getAttribute('imgurl').replace('http:', 'https:'));
photo_overlay_image.setAttribute('height',divs[n].getAttribute('imgheight').replace('http:', 'https:'));
photo_overlay_image.setAttribute('width',divs[n].getAttribute('imgwidth').replace('http:', 'https:'));

var photo_overlay_text = divs[i].getElementsByTagName('span')[0];
photo_overlay_text.innerHTML = new String(seekSlide + 1) + " of " + new String(maxSlides) + "<br/>" + divs[n].getAttribute('pagetitle');

divs[i].setAttribute('index', new String(seekSlide));
}//if seekSlide
iCountDivs+=1;
}//if isSlide
}//for n
break;
}//if hasSlideConainer
}//for i
}}
</script>

The code above, first counts DIV containers with an attribute called tag that has a value of slideshowitem. Then, the code initializes the slideshow by loading the first image and placing the links over the first slide for the previous and next slides. Each of the DIV containers must contain attributes for image link (imgurl), image height (imgheight), image width (imgwidth), page link (pageurl), page title (pagetitle) and a flag to indicate the page mode (pagemode). Slideshows, in general, look best when all of the slides are the same size, but, the code above allows the images to be different sizes. One DIV container is needed for each slide in the slideshow. A sample DIV container follows:

<div tag="slideshowitem" imgurl="one_slide_image_goes_here" imgheight="300" imgwidth="400" pagetitle="one image description goes here" pagemode="lightbox_OR_leave_empty" pageurl="link_to_either_a_web_page_OR_a_large_image_goes_here" style="display: none;"></div>

Because the code changes the image links on the page dynamically, the lightbox utility integrated into Blogger seems to have some issues keeping up with the changes. As a result, I created a pagemode attribute, so, if linking to an image, the pagemode attribute can be set with a value of lightbox to indicate that the code should use a workaround for the Blogger lightbox, which displays the image in the slideshow container rather than linking directly to the image. To position, the slideshow, add a DIV container to the post with an attribute called tag that has a value of slideshowcontent at the spot where the slideshow should appear. A sample DIV container follows:

<div tag="slideshowcontent"></div>

Some CSS is used to place a border around the image and is required to position the text overlay and the previous and next button overlays. Sample CSS follows:

.photo-box {
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #333;
border-right:1px solid #333;
margin-bottom:5px;
margin-right:10px;
position:relative;
left:-10px;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.1);
box-shadow:1px 1px 5px rgba(0,0,0,.1);
float:left;
padding:5px
}
.photo-overlay {
position:absolute;
bottom: 10%;
Left:5%;
color:#fff;
font-size:10px;
text-align:center;
line-height:11px;
overflow:hidden;
font-weight:bold !important;
text-shadow:0 1px #000;
width:90%;
background-color: rgba(0,0,0,.5);
padding-top:3px;
padding-bottom:3px;
padding-left:0px !important;
padding-right:0px !important;
margin:0px !important;
border:1px solid white;
z-index:15;
}
.photo-overlay-container {
position:relative;
float:left;
padding:0px !important;
margin:0px !important;
z-index:10;
}
.ssprev, .ssnext {
font-size: 3em;
z-index:20;
text-shadow:0 1px #000;
color: #ffffff;
cursor:pointer;
display:block;
}
.ssprev {
position:absolute;
left:10px;
top:30%;
}
.ssnext {
position:absolute;
right:10px;
top:30%;
}

The CSS code above would need to be added to the advanced section of the customize theme menu. This gadget isn't designed to allow multiple slideshows in a single post and isn't designed to behave nicely in a sidebar. Also, when linking to images, this gadget doesn't play well with Blogger's lightbox. In my humble opinion, given the limited nature of this gadget and the technical challenges in actually using it, I don't see this type of slideshow being adopted by very many people, but, I felt that I should share anyway. By the way, the character art for this post appears to be the Queen of Hearts inspired by the Looking Glass Wars.