PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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'):


<!---// 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...



$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 "":


$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:


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

wrongnumber
10-27-2011, 08:38 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:


#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):


#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:


<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:


<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):


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.

wrongnumber
10-28-2011, 06:02 PM
hi john,

thanks for the enthusiasm shown.. :) just loved your advice, okay I implemented all the points, but its still I think not rendering correctly, though the images are re sized well, but still needs some improvement.

Thanks

jscheuer1
10-29-2011, 01:46 AM
That modification was primarily to get the illusion of transparency without bleed through. But I may have misunderstood how you want the descriptions. I thought you liked having the description all on one line extending out sort of freely and moving up and down, but never disappearing. I think that looks distinctive. But if that's not what you're after, we can make that part like the demo page where the description is confined to an area just below the image area, the width of the image area, and disappearing briefly between each image. However, with different sized images it will not always be exactly beneath each image, only on the ones that fill the height of the slideshow. With other images it will appear in the same area, and there will be vertical space between it and the bottom of the smaller image. And the longer descriptions would wrap, at which point you might want to reconsider what I said before about replacing line breaks with a space rather than nothing:


. . . you might want to replace them with space not "":


$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

So that when they do wrap they can do so at more logical/common usage spots.

But I'm getting ahead of myself. Is that the problem - that you want the descriptions confined to underneath and to the width of the images and want them to appear and disappear as on the demo page, or is it something else?

I'm thinking it might be nice to leave it like it is only instead of the descriptions moving up and down, have them stay in one spot.

But it's your page. What exactly are you after?

wrongnumber
10-29-2011, 07:02 AM
I am looking for the coments beneath the pic to be there just below the pic confined to the width of the pic, there should not be the up down movement, currently the comment is spread on the entire page (on chrome and ff), the comment should change smoothly as the pic changes.

Thanks:)

jscheuer1
10-29-2011, 04:11 PM
OK, the styles we added should be changed, some removed, some added, so they look like this:


#fadeshow3, #fadeshow3 .gallerylayer {
background-color: transparent !important;
}
#fadeshow3 .gallerylayer img {
max-width: 280px;
max-height: 373px;
}
#fadeshow3 .fadeslidedescdiv img {
display: none !important;
}

Use my updated version of the script:

4163

Don't worry, your modification to resize the images is taken care of by the added style above.

In the on page new fadeSlideShow() call get rid of the oninit function we added last time. Make sure to get rid of that added comma as well. And change the descreveal to always (remove the highlighted, change to the red):


fadeduration: 1500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "",
oninit: function(){
var set = this.setting;
jQuery('#header').css({position: 'relative'}).append(set.$descpanel);
}
})

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

Change the width dimension to 280 here:


var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [280, 373 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearr . . .

and here:


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

wrongnumber
10-30-2011, 01:20 PM
Awesome!... that looks great... only another favor, the grey box's height needs a couple of pixels as it is damaging the caption text.

Thanks sir!

jscheuer1
10-30-2011, 04:22 PM
You haven't updated the fadeslideshow.js do it with the one in my previous post.

Also, I thought you wanted the captions to be always there. If so, change the "peekaboo" to "always" as also mentioned in my previous post.

I was looking at this some more and some browsers seem to need:


#fadeshow3 .fadeslidedescdiv, #fadeshow3 .fadeslidedescdiv div, #fadeshow3measure {
width: 271px !important;
}

added to the style. I was able to test this in IE where there was a problem (fixed it), and Chrome where there was not and still isn't, but suddenly the scraping function has stopped working in Firefox, so I couldn't test in that browser. It had been fine without it until the scraping function stopped working. It also stopped working on the live page at the same time though, so it's not the added style.

wrongnumber
10-30-2011, 06:22 PM
yeah this feels better than before, dunno why the js did not update, but it is now, and sorry i missed out the always thing, scraping image is showing in IE but that too, too up in the <div> whereas ff shows an image not found logo, nothing for chrome, now the thing sometime gets awkward is, that photos with shorter heights (because the have a larger width and are being automatically reduced) the distance between the caption box and image becomes too much (enough for an image for the same size to fit in...) so if CSS could dynamically change that value enough to keep it lingering to the image (so that grey box is not bonded to the DIV instead its in sync with the image inside the DIV), since I am not that much of CSS guy, its difficult for me.

Thanks Sir!..
Your a CSS-JS Poet!...

wrongnumber
10-31-2011, 12:06 PM
hi John,

I just noticed that in chrome, the background is not in sync with the rest of it.

Thanks

jscheuer1
10-31-2011, 05:08 PM
It is here, I just checked. You may need to clear the cache and/or refresh the page.

I have some ideas for your last issue(s), but no time to go into them right now. I will post them later.

jscheuer1
11-02-2011, 03:26 PM
The problem in Firefox was on my end, I had javascript off for testing something else. :o

OK, the scraping thing is too high because the styles put it there. Change that whole section, adding a wrapper (highlighted), paste this over what was there as much has changed within it as well:


<div style="height: 373px; width: 280px; overflow: hidden;">
<div id="fadeshow3" style="height: 373px; width: 280px; position: relative; overflow: hidden; background-color: transparent;">
<div style="position: absolute; top: 50%;">
<div class="greenBorder" style="text-align: center;">
<img src="http://nishantarora.in/wp-content/uploads/2011/10/ajax-loader.gif"><br><small>Scraping Images From Facebook</small>

</div>
</div>
</div>
</div>

Now we can go two ways on the rest of it. Notice how in Chrome and Firefox, the images center vertically? IE can be made to do that as well, and that will take care of there being so much space between the shorter images and the descriptions. But, if that's not enough, I've worked out a complex scheme. I'll try and show you a demo, so you can compare how it currently looks in Chrome to it. Demo of new scheme:

http://home.comcast.net/~jscheuer1/side/inmotion/nishant.htm

Once you decide which way you want to go, let me know and I'll explain the required changes.

wrongnumber
11-02-2011, 07:35 PM
Now we can go two ways on the rest of it. Notice how in Chrome and Firefox, the images center vertically? IE can be made to do that as well, and that will take care of there being so much space between the shorter images and the descriptions. But, if that's not enough, I've worked out a complex scheme. I'll try and show you a demo, so you can compare how it currently looks in Chrome to it. Demo of new scheme:

http://home.comcast.net/~jscheuer1/side/inmotion/nishant.htm

Once you decide which way you want to go, let me know and I'll explain the required changes.

Hats off to you sir, the demo looks superb, I would like to implement the demo one on my site...

thanks for all the help... your really the best, I've ever met!

jscheuer1
11-03-2011, 09:23 AM
Sorry, one more choice to consider, puts descriptions under the images:

http://home.comcast.net/~jscheuer1/side/inmotion/nishant_working.htm

I was pretty excited about it at first because some of the shorter images seemed cut off a little by the descriptions. But now I'm not so sure, looks flatter to me. We can always lighten up the description background opacity for the previous demo so it doesn't obscure the images as much.

wrongnumber
11-03-2011, 09:55 AM
even this looks nice, I am happy with both... :)

jscheuer1
11-04-2011, 06:59 AM
First, keep a backup of what you have.

OK then, let's go with the first one but with the lighter background for the descriptions -

Change the added styles to:


#fadeshow3, #fadeshow3 .gallerylayer {
background-color: transparent !important;
}
#fadeshow3 .gallerylayer img {
max-width: 280px;
max-height: 374px;
margin-top: 0 !important;
vertical-align: top;
}
#fadeshow3 .fadeslidedescdiv img {
display: none !important;
}
#fadeshow3 .descpanelfg, #fadeshow3measure {
max-width: 269px;
}
#fadeshow3 .descpanelbg {
opacity: 0.35 !important;
}

Put these in the head of the page:


<!--[if lt IE 9]>
<style type="text/css">
#fadeshow3 .descpanelbg {
filter: alpha(opacity=35) !important;
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">
#fadeshow3 .descpanelfg, #fadeshow3measure {
width: 269px !important;
}
#fadeshow3 .gallerylayer img {
width: expression(this.width>280?280:true);
height: expression(this.height>374?374:true);
}
</style>
<![endif]-->

Update jQuery to version 1.6.4, change this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Change the on page part of the script to (middle portion skipped, use what you already have there):


<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 = $('#' + wrapperid), off, newstyle, thestyle;
$show.bind('repositionEvent', function(){
off = $show.offset();
newstyle = '<style title="posbg" type="text/css">#' + wrapperid + ', #' + wrapperid + ' .gallerylayer {' +
'background: white url(' + bgim + ') ' + (bgwidth - off.left) + 'px ' + (bgheight - off.top) + 'px !important;}<\/style>';
if((thestyle = $('style[title=posbg]')).size()){
thestyle.replaceWith(newstyle);
} else {
$('head').append(newstyle);
}
});

$show.trigger('repositionEvent');
$(window).resize(function(){$show.trigger('repositionEvent');});
});
var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [280, 373 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: . . .

//middle section skipped

. . . fadeduration: 1500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "",
onslide: function(layer, index){
var newheight = layer.getElementsByTagName('img')[index].offsetHeight, set = this.setting;
set.$wrapperdiv.animate({height: newheight, marginTop: set.dimensions[1]/2 - newheight/2},
{complete: function(){set.$wrapperdiv.trigger('repositionEvent');}});
set.$descpanel.animate({marginTop: newheight - set.dimensions[1]});
}
})

</script>

In the body, use this markup for the slide show:


<table cellpadding="10px"><tr><td>
<div style="height: 373px; width: 280px; overflow: hidden;">
<div id="fadeshow3" style="height: 373px; width: 280px; position: relative; overflow: hidden; background-color: transparent;">
<div style="position: absolute; top: 50%;">
<div class="greenBorder" style="text-align: center;">
<img src="http://nishantarora.in/wp-content/uploads/2011/10/ajax-loader.gif"><br><small>Scraping Images From Facebook</small>

</div>
</div>
</div>
</div>
<td>

That should do it. If there are any problems, restore the backup and put the problem page up under another name so I can see it.

One last thing, I've updated the fadeslideshow.js script again. This is a minor change to allow IE and Opera to horizontally center images if they're less than 280 pixels wide:

http://home.comcast.net/~jscheuer1/side/inmotion/js/fadeslideshow.js

It might not be required. It only comes into play if the image was resized via the min width/height such that it comes out as less than 280 wide. I saw there was one narrow image, but it wasn't resized, so it would be fine without this.

But there are so many images, many I'm sure I haven't seen yet. There could be some that would look best with this minor update.

For consistency you can change the loading image it uses to the one you have. This may rarely come into play, but when it does it will look better than the default which I don't think you have on the site anyway (near the top of fadeslideshow.js - change highlighted):


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['http://nishantarora.in/wp-content/uploads/2011/10/ajax-loader.gif',220,19]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

wrongnumber
11-04-2011, 07:44 PM
hi john,

really aprriciate the efforts, but the script broke, since its pretty high level JS, I could not trace it where, but I have uploaded the problem page here http://nishantarora.in/problem/ tell me if something can be done, for the time being the pages are restored from the backup!.

Thanks Sir!

jscheuer1
11-05-2011, 12:26 AM
Not too bad. You've got an extra opening script tag here:


<!---// 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.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://nishantarora.in/header/fadeslideshow.js"></script>
<script type="text/javascript">

<!---//*** Thanks to JOHN ***//--->
<script type="text/javascript">
jQuery(function($){
var bgim = 'http://nishantarora.in/wp . . .

Get rid of that.

And there's a little missing code here (partly my fault, the way I explained it):


var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [280, 373 ], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [ . . .
array code removed
. . . ],
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: "always",
togglerid: "",
onslide: function(layer, index){
var newheight = layer.getElementsByTagName('img')[index].offsetHeight, set = this.setting;
set.$wrapperdiv.animate({height: newheight, marginTop: set.dimensions[1]/2 - newheight/2},
{complete: function(){set.$wrapperdiv.trigger('repositionEvent');}});
set.$descpanel.animate({marginTop: newheight - set.dimensions[1]});
}
})

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

Add that.

And not all, if any of the added/changed styles are there, but I guess they were in the common stylesheet and you had to revert it. I see you did add the IE conditional styles. That's good, but I'm not talking about those. I'm talking about removing the added styles from before and replacing them with these:


#fadeshow3, #fadeshow3 .gallerylayer {
background-color: transparent !important;
}
#fadeshow3 .gallerylayer img {
max-width: 280px;
max-height: 374px;
margin-top: 0 !important;
vertical-align: top;
}
#fadeshow3 .fadeslidedescdiv img {
display: none !important;
}
#fadeshow3 .descpanelfg, #fadeshow3measure {
max-width: 269px;
}
#fadeshow3 .descpanelbg {
opacity: 0.35 !important;
}

And you haven't updated the fadeslideshow.js script. Perhaps you reverted that too. But that's a fine point, but it would be a good thing. And doing/leaving that part would not hurt the working page.

wrongnumber
11-05-2011, 01:17 PM
hi sir,

superb, done that, can you please check if I missed out something... it seems to be working great... and i had updated the .js... can you please check if its the version you gave me.

Thanks
PS: SuperCOdeR

jscheuer1
11-05-2011, 04:28 PM
As far as I can tell, you've got everything as I outlined it. I checked in a number of browsers and it looks good in all of them. The styles, scripts and markup are all as I posted them to be, including the updated fadeslideshow.js file.

One thing I just noticed because of the particular images scraped was that there are two images that are identical:


https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/167613_1781920717620_1527510667_31878680_3823711_n.jpg

and:


https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/303701_2470781178701_1527510667_32654683_722149520_n.jpg

I don't know how they may be used elsewhere - say on your facebook page, but if possible you should get rid of one of them, and have anything else that needs the one you get rid of point to the one you keep.

But I'm also thinking that maybe some or all of these whatever-sncwhatever folders are aliases of each other. If so, it would be a good idea to only look in one of them.

wrongnumber
11-05-2011, 06:14 PM
Hi Sir,

Super Stuff... but there is a problem coming in, I do not know how I can explain to reproduce it, because since every time a new set of image is loaded into the array (dynamic implementation... :))) so I just did a screen shot from the same set of images, this was coming with certain images and not with all have a look here http://nishantarora.in/problem/prob.png

Thanks
PS: the images are same, because FB has two copies in my albums, one is COVER photos of my profile timeline, other is the original album itself, so... its not the script's fault.. :P

jscheuer1
11-05-2011, 07:14 PM
I can't fix it from a picture of the problem. At least I don't think so. If you could at least give me the address to the image that was showing, I might be able to duplicate it.

Better yet, when you see it again, use the browser's 'view source'. Copy it all and paste it into a text file. Make a .zip file from that and attach it to a post here or give me a link to it (either the text file or the .zip of it).

wrongnumber
11-05-2011, 07:35 PM
I can't fix it from a picture of the problem. At least I don't think so. If you could at least give me the address to the image that was showing, I might be able to duplicate it.

Better yet, when you see it again, use the browser's 'view source'. Copy it all and paste it into a text file. Make a .zip file from that and attach it to a post here or give me a link to it (either the text file or the .zip of it).

Yeah... sorry instead of screen shot it should have been the code shot, :)... I will try reproducing it.. :)

Thanks

jscheuer1
11-05-2011, 07:58 PM
One thing I thought of that you have to be careful of though is that during the changeover some things like old css or scripts might be cached in some browsers. So if you see it, get the code, and then clear the cache and refresh the page. Chances are it will be the same set of images. I've noticed they don't seem to change like every minute. See if that fixes it. Even if it does, there might still be a problem that will show up later. But at that point you can grab the code knowing it's probably something I can fix.

wrongnumber
11-05-2011, 08:14 PM
oh now i get it... actually its a cache plugin working at the backend, it is disabled for the logged in user, and thus the image set changes and then refreshes after an hour or so...

let me disable it...

jscheuer1
11-06-2011, 05:55 PM
Hmm, OK. That might actually be part of the problem. In any event we have to be certain that when you see the problem you are viewing the page as currently updated with no part of the scripts, css, or code of the page cached in the browser or on the server.

In any event, the image of the problem from your post shows the background out of sync above the slideshow, right? If that's the case I'm very unsure what could be the problem as the entire slideshow resizes now. Anything above the slideshow is the actual body background image.

So I'm pretty confident once all caches are cleared the problem will vanish. If it doesn't, get a code shot and get it to me. I would also want to know which browser and which browser version it happened in.

wrongnumber
11-06-2011, 06:36 PM
the thing that was happening was, the out of sync section was moving along the pic border when it was re sizing itself, unable to reproduce the same set of random images.. :(

Thanks

jscheuer1
11-06-2011, 08:03 PM
OK, well I opted for repositioning the background after the image slideshow resized itself. In experiments leading up to the finished code I had been doing it in steps as the image resized. This was too much for IE though and made all the other animations too choppy. Even on browsers where it didn't get choppy, the sync wasn't perfect during transition anyway, another reason to skip it.

However, the old slideshow was wider than the images, so one could see an out of sync background on the left and right edges of the images if it resized, but it didn't. Now the slideshow is the width of the images, so that cannot happen unless an image is narrower than 280px. There is at least one such image. But in that case the out of sync border is transitory. It starts out in sync and only while the slideshow resizes does it shift slowly out of alignment. Once it's finished things line up again. At no time should the border position outside the 280 wide box of the slideshow change. If it does, either I've missed something (possible but unlikely) or something from one of the older versions of the page is still cached.

In any event, the image of the problem doesn't show a narrower image and the background appears in sync on its sides. It's only at the top where there appears to be a problem and you have that circled. This cannot happen if everything is using the updated files. Or, as I said, I really don't think so. I've been looking at the page a number of times since you mentioned it. Often that image shown in your problem image has come up. It's never had its background out of sync.

I may still be misunderstanding, here's your image:

http://nishantarora.in/problem/prob.png

The problem is at the top of the top image and circled, right?

Or is this a new problem?

wrongnumber
11-06-2011, 08:09 PM
I may still be misunderstanding, here's your image:

http://nishantarora.in/problem/prob.png

The problem is at the top of the top image and circled, right?

Or is this a new problem?

The very same!...

jscheuer1
11-06-2011, 09:03 PM
The only ways I can think of for that to happen is if there is something of one of the older versions of the page, its scripts or styles cached, or an unusual and fairly uncommon transient glitch in the browser as regards redrawing the screen. Unless it's something else, I don't think it has or needs a solution.

If it's the former, it will work itself out once all the relevant caches get updated. If it's the latter, it's no different than the countless other similar things that happen with any page every once in a great while.

But, as I say, if you see it again and can get a code snapshot of the page's 'view source', that might show a different answer.

wrongnumber
11-07-2011, 08:40 AM
yes yes, I will let you know, for the time being... a big thaannnkkksss... you made it look.... awesome... :))

Thanks

jscheuer1
11-07-2011, 09:02 AM
OK, sorry I was beginning to think there were two problems because:


the out of sync section was moving along the pic border when it was re sizing itself,

didn't sound to me like the problem in the picture. But a picture can't show movement. I assumed you meant the side.