Re: D5 Socialia Theme Updated to 1.2.6 Version and Uploaded to Server

[badlands druid]

Hi,

The following javascript code fixes a number of problem with blank images as well as with toggling the visibility of the window. The caption bar is hidden for images with no captions.

Here is the js:

$(document).ready(function() {
//Initialize the slideShow
slideShow();
});

// initialize slideshow
function slideShow() {

// interval of slide changes in milliseconds
var $interval = 3000;

var $current;
var $iVal = null;

//Set opacity of all images to 0
$(‘#gallery a’).css({opacity: 0.0});

//Get first image and display it (set it to full opacity)
$current = $(‘#gallery a:first’);
$current.css({opacity: 1.0});

//Hide caption background
$(‘#gallery .caption’).css({opacity: 0.0});

//Resize width of caption according to image width
$(‘#gallery .caption’).css({width: $(‘#gallery a’).find(‘img’).css(‘width’)});

// switch to next slide in slideshow
var gallery = function() {
var $next = ( $current.next(‘.slide’).length == 0 ) ? $(‘#gallery a:first’) : $current.next(‘.slide’);

$current.css({opacity: 1.0});
$next.css({opacity: 0.0});

//Set the fade in effect for the next image, show class has higher z-index
$next.animate({opacity: 1.0}, 1000);
$current.animate({opacity: 0.0}, 1000);

$current = $next;

//Get next image caption
var caption = $next.find(‘img’).attr(‘rel’);
if (caption==null) caption=”;
if ( caption.length > 0 ) {

//Animate the caption, opacity to 0.7
$(‘#gallery .caption’).animate({opacity: 0.7},1000 );

} else {
$(‘#gallery .caption’).animate({opacity: 0.0},1000);
}

//Display the content
$(‘#gallery .content’).html(caption);

}

// pause slideshow if window loses focus
$(window).focus(function() {
if ( $iVal == null ) $iVal = setInterval(gallery,$interval);
});

// resume slideshow if window gains focus
$(window).blur(function() {
clearInterval( $iVal );
$iVal = null;
});

// start slideshow
$iVal = setInterval(gallery,$interval);
}

<a href=”#” class=”slide” >
<img src=”http://mydomain.com/image2.jpg&#8221; alt=”2″ rel=”<h3>Caption text</h3>” />
</a>