problem while dynamically implementing fadeshow

**wrongnumber** · 10-02-2011, 08:35 PM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
I tried to implement this dynamically, basically I have a database containing links of pics in my facebook profile as well as date time and comments on them, now every time a page loads i run a query to extract at random 12 images (i.e their links on facebook servers to show on my website header.)
the thing works just fine(when it works...), i have edited the js files to display images only with a width of 300px because i have initialized the div with this width, also because dynamically calculating width of each image was too resource intensive.

THE PROBLEM I AM FACING IS THAT THE SCRIPT IS LOADING ONLY SOMETIMES, IT LOADS WELL SOMETIMES FAILS THE OTHER TIMES, AND THIS DISRUPTED THE DESIGN AS THE DIV WOULD COLLAPSE.
FOR THE TIME BEING I HAVE FILLED THE DIV WITH A LOADING GIF TO SAVE MYSELF FROM EMBARRASSMENT BUT A DETAIL ON WHY THIS HAPPEN WOULD BE WONDERFUL.

4) APPLICATION URL: http://nishantarora.in/ Refresh it a few times if it does not loads

Thank$

**jscheuer1** · 10-03-2011, 03:19 PM

I'd be more interested in the times it doesn't work, that's what you want to correct, right?

I just found one of those times. The imagearray has syntax errors. Line breaks are there that cannot be. I don't know how they got there brcause I cannot see the code that generated them, where is it? Since you say it's taking it from a database, it's probably server side.

Anyways, here's the problem (from the served source code of the page obtained by using the browser's 'view source'):

Code:

<!---// CUSTOM ADDITION FOR MARVELOUS HEADER //--->
<!---/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
* http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
***********************************************/--->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://nishantarora.in/header/fadeslideshow.js"></script>
<script type="text/javascript">
var mygallery3=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
		dimensions: [300, 300 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc4/155802_1702760898674_1527510667_31716798_8090390_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Sunday 5th of December 2010 (08:06:12 AM):Birthday Calendar
http://apps.facebook.com/fdcalendar/?ref=caption"],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/167613_1781920717620_1527510667_31878680_3823711_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Monday 24th of January 2011 (07:00:02 PM):"],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash2/154923_1702759138630_1527510667_31716790_2389461_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Sunday 5th of December 2010 (08:03:56 AM):Birthday Calendar
http://apps.facebook.com/fdcalendar/?ref=caption"],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash2/151044_1702761218682_1527510667_31716799_3948767_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Sunday 5th of December 2010 (08:06:41 AM):Birthday Calendar
http://apps.facebook.com/fdcalendar/?ref=caption"],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash2/29136_1423939648317_1527510667_31073681_8315143_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Saturday 1st of May 2010 (10:01:20 AM):best frenz.."],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/282411_2199807724534_1527510667_32388848_8016290_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Friday 22nd of July 2011 (05:09:36 AM):"],
["https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/207522_1933266221163_1527510667_32111104_3578776_n.jpg", "http://www.facebook.com/photo.php?pid=31716798&id=1527510667", "_blank", "Tuesday 19th of April 2011 (02:15:17 PM):"],
["https://s-hphotos-sjc1.fbcdn.net/hphotos-snc6/168481_1781920357611_1527510667_31878679_5693123_n.jpg", "http://www.facebook.com/photo.php?pid=31878679&id=1527510667", "_blank", "Monday 24th of January 2011 (06:59:45 PM) : "]//<<-- no trailing arrows....
//I was able to extract 8 Photos from Facebook....
],
	displaymode: {type:'auto', pause:7500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

</script>

<!---// CUSTOM ADDITION FOR MARVELOUS HEADER ENDS//--->

See those red highlighted sections, they're not wrapped from the previous line, there are line breaks (carriage returns and/or line feeds) hard coded into the served source. These must be removed. Better yet, never put there in the first place.

Where do they come from? Is that how the entry is in the database? If so, remove them there. Or is it in the code that retrieves the data? Does it add a line break if the data is over a certain number of characters in length. If so, get rid of that part of the code that does that.

It could be something else causing the line breaks I suppose. But whatever it is, these line breaks cannot be there. They break the javascript.

**wrongnumber** · 10-03-2011, 04:31 PM

I am impressed thanks for spotting that for me, actually its loading from the database, and there are some line breaks loaded from facebook itself, just passed the caption through str_replace and replaced all the "\n" and "\r", had to do them seperatwly because they both do not appear together or in a pattern...

PHP Code:


$cap = mysql_result($result,$j,"caption"); // loads the caption from the resource

$cap = shorten_string($cap,10); // shortens the string upto only 10 words which is yet another custom written function

$cap = str_replace("\r","",$cap); //replaces the breaks

$cap = str_replace("\n","",$cap); //does the same

Thanks jscheuer1 sir for pointing that out, its working perfectly!

PS: check here http://nishantarora.in/ if still you find something wrong..

**jscheuer1** · 10-03-2011, 05:26 PM

Well, no more errors that I see. But you might want to replace them with space not "":

Code:

$cap = mysql_result($result,$j,"caption"); // loads the caption from the resource 
$cap = shorten_string($cap,10); // shortens the string upto only 10 words which is yet another custom written function 
$cap = str_replace("\r"," ",$cap); //replaces the breaks 
$cap = str_replace("\n"," ",$cap); //does the same

And I notice that you are using the descreveal: 'peekaboo'. That makes the descriptions move up and down in the layout. If it were 'always' they wouldn't move, or 'ondemand', only when the mouse moves over them.

About that layout, the descriptions are always there anyway because of the css and scripted dimensions for the show, so you might want to rethink that. You have a fadeshow3 box of 300x300 configured in the on page part of the script, but some of the images are taller. When a particularly tall one is followed by a short one, there's bleed through. That could be fixed if you increased the height for the slideshow in the on page part of the script.

**wrongnumber** · 10-03-2011, 05:36 PM

I even tried implementing a dynamic size of the display box, but that was resource intensive, what i tried to do was, i used the the getimagesize() to get dimensions in all the images, since the JS has already been hacked to only display images with width of 280 (considering there is 10px being used on the padding) i did my calculations as follows (pseudocode)

if,

x = original width of the image
y = original height of the image
w = required width (i.e 300px)
h = (w*y)/x

and then store these values in an array and get the maximum out of it, and use it in the config of the fadebox

But... it was resource intensive enough to exceed the 30 seconds deadline, maybe because it loaded the dimensions from facebook servers for each image.

Any Ideas on this are welcome!

**wrongnumber** · 10-03-2011, 05:57 PM

WAS just wondering that implementing this i had this grey colored box, at the back of the pics, can that be converted to transparent?...

Will love to that!

**wrongnumber** · 10-27-2011, 04:45 PM

hi,

this script is not working on FireFox.

Thanks

**jscheuer1** · 10-27-2011, 08:27 PM

Well, it looks like it's working in Firefox to me. However, the layout is covering parts of the page that you probably don't want it to cover. That's a css and HTML issue, not much to do with the script.

As for having a transparent background, you can do that. But there will be even more bleed through. But, since I'm not sure what you're going for exactly, you might like that. Just put this in a stylesheet for the page:

Code:

#fadeshow3, #fadeshow3 .gallerylayer {
	background-color: transparent !important;
}

**wrongnumber** · 10-27-2011, 08:38 PM

Originally Posted by jscheuer1

Well, it looks like it's working in Firefox to me. However, the layout is covering parts of the page that you probably don't want it to cover. That's a css and HTML issue, not much to do with the script.

As for having a transparent background, you can do that. But there will be even more bleed through. But, since I'm not sure what you're going for exactly, you might like that. Just put this in a stylesheet for the page:

Code:

#fadeshow3, #fadeshow3 .gallerylayer {
	background-color: transparent !important;
}

Sir you are awesome,

it worked like charm, looks great in chrome, just wanted it badly...

Thanks a lot...

**jscheuer1** · 10-28-2011, 12:58 PM

If you want it to be even better, add these two other rules (highlighted):

Code:

	#fadeshow3, #fadeshow3 .gallerylayer {
		background-color: transparent !important;
	}
	.fadeslidedescdiv, .fadeslidedescdiv div {
		width: 100% !important;
	}
	.fadeslidedescdiv {
		height: 17px !important;
		margin-top: 18px !important;
	}

Get rid of the highlighted display: table; and change the height value (red) as shown:

Code:

<div id="fadeshow3" style="display: table; height: 373px; width:300px; #position: relative; overflow: hidden; background-color: transparent;">

Add this (highlighted) before the new fadeSlideShow() call on the page:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://nishantarora.in/header/fadeslideshow.js"></script>
<script type="text/javascript">
jQuery(function($){
	var bgim = 'http://nishantarora.in/wp-content/themes/vostok/img/blog-bg.gif', // set backgroun image
	bgwidth = 150, bgheight = 165, // set its dimensions
	wrapperid = 'fadeshow3', // set wrapper id the same as the slideshow
	$show, off = ($show = $('#' + wrapperid)).offset();
	$('head').append('<style title="posbg" type="text/css">#fadeshow3, #fadeshow3 .gallerylayer {' +
	'background: white url(' + bgim + ') ' + (bgwidth - off.left) + 'px ' + (bgheight - off.top) + 'px !important;}<\/style>');
	$(window).resize(function(){
		var off = $show.offset();
		$('style[title=posbg]').replaceWith('<style title="posbg" type="text/css">#fadeshow3, #fadeshow3 .gallerylayer {' +
		'background: white url(' + bgim + ') ' + (bgwidth - off.left) + 'px ' + (bgheight - off.top) + 'px !important;}<\/style>');
	});
});
var mygallery3=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
		dimensions: [300, 373 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
	image . . .

And change the height dimension in the call as shown above in red.

Finally, add this to the end of the call (highlighted):

Code:

	descreveal: "peekaboo",
	togglerid: "",
	oninit: function(){
		var set = this.setting;
		jQuery('#header').css({position: 'relative'}).append(set.$descpanel);
	}
})

</script>
<!---// CUSTOM ADDITION FOR MARVELOUS HEADER ENDS//--->

Don't miss the added comma (red) after the togglerid value.