D5 Creation Forum

Open Forum for D5 Creation's Members and Visitors

Before requesting any support Please search the Forum First. You may find your desired answer. This will save your waiting time and will save our working hour. We may not answer the question which we have already answered. You should also read our Support Policy

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

Front Page D5 Creation Forum Announcement Socialia Theme Updated to 1.2.6 Version Re: D5 Socialia Theme Updated to 1.2.6 Version and Uploaded to Server

badlands druid


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

// 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>” />