problem with modified Ultimate Fade-in slideshow

[badtant]

hi!

i've modified the Ultimate Fade-in slideshow 1.5 quite much to satisfy my needs.
i've changed so that any content can be shown (not just images) and i've also created an ajax functionality which updates the array of content automaticly.

my url:
http://www2.hemsida.net/badtant/test/index.html

first i specify the content to be in the slide like this (shout0 and shout1):
<div id="shoutarray">
<div id="shout0"><blockquote><div><p>If it sounds country, man, that's what it is: It's a country song!</p></div></blockquote><cite><a href="/badtant" class="member-image" title="badtant is online. View profile."><img src="http://alias.passagen.se.stage.sol.basefarm.net/images/c4/ca/c4ca4238a0b923820dcc509a6f75849b/e914a1625a57cce9b1642926ccfea42e_125x125.jpg" alt="" /></a><span class="online-status online"><a href="metropol_member_view.shtml" title="badtant is online. View profile.">1 badtant</a></span></cite></div>
<div id="shout1"><blockquote><div><p>Vinden vilar</p></div></blockquote><cite><a href="/Liliss_234" class="member-image" title="Liliss_234 is online. View profile."><img src="http://alias.passagen.se.stage.sol.basefarm.net/images/1f/0e/1f0e3dad99908345f7439f8ffabdffc4/881fa3ea209bb22f7dffe2cf78681880_125x125.jpg" alt="" /></a><span class="online-status offline"><a href="metropol_member_view.shtml" title="Liliss_234 is offline. View profile.">2 Liliss_234</a></span></cite></div>
</div>

the content is later read into my js array "shoutcast" with the function updateShoutArray (available in shoutbox.js)

then the fadeshow is created as usual with:
new fadeshow(shoutcast, 4000, 0);

--------------

when it all runs i have an ajax feature which updates the content every 30 seconds:
onload="setInterval('getShouts()',30000);"

getShouts (in ajax.js) updates the div shoutarray with new content and then cals the newShouts function (in shoutbox.js)
now the file shoutsigen.html is read for new content (should later be replaced with a dynamic page).

newShouts calls updateShoutArray (function was also was used earlier) that reads the new content and put it in the js array shoutcast.
then changeShoutArray is called to put the new array into my slideshow.

changeShoutArray was copied from this thread:
http://www.dynamicdrive.com/forums/showthread.php?t=8158

--------------

all this works great but there is one problem. because of missing functionality in velocity (http://jakarta.apache.org/velocity/) that i currently use, i can't put the first array of content that i want to use directly in the div called shoutarray (the first thing i explained). it has to be read from the same file (shoutsigen.html) that i later collect new content from.
i've tried using SSI to include the file but SSI isn't supported here.

there doesn't seem to be a way to include the content properly, at least i can't find any... does anybody have an idea?
if not, maybe i can work around this problem somehow? but i really can't figure out how...

any ideas of how to fix this problem would be great!
i hope you can understand my explanation of how this thing i've created works =)

here's a zip-file with all my files if you want to download an laborate with it:
http://www2.hemsida.net/badtant/test/test.zip

feel free to use it on your own sites too if you find it usefull =)

thanks!!

[Twey]

Does Velocity not include such a mechanism?

[badtant]

there are the functions #parse and #include but neither seems to work.

what i want is to include the content which my external page (shoutsigen.html in my example but should later be replaced with a dynamic page) renders out and neither did that... it just got empty. it works now when i'm including a plain html file but not when i'm trying with a dynamic page.

[Twey]

there are the functions #parse and #include but neither seems to work.This is your real problem. I suggest you look into it -- you will need the help of someone who is familiar with Velocity.

[badtant]

well, the ones i know that know alot about velocity don't think it's possible... and i can't find any good forum for velocity. do you know one?

another solution to work around this that i have thought about is to leave my shoutarray div empty at first and then run the ajax part directly when the page has loaded to get the content. and after that run updateShoutArray to build up my shoutcast array.
this way i will get the content but the problem here is that i have to wait for this to finnish before i can start the fadeshow with new fadeshow(shoutcast, 4000, 0). and i don't know if that is possible since i think it has to be run like it runs now to get my fadeshow att the right place of my page. but maybe i'm wrong? any thoughts about that?

thanks!

[Twey]

I don't think so, no. I can't be sure, since you didn't link to the script in question, but I think it should be fine to call it from wherever you need to, since the first argument looks like an ID.

[badtant]

sorry, this is the script in question that i've modified:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

the first argument is the array containing the content for the different slides.

[Twey]

Ah -- you're right. It calls document.write():
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')The way around this is to create the DIVs and things manually, and remove that code from the source.

[badtant]

yeah, that could work! i'll give it a try =)

[badtant]

it works =) now i just have one last problem...

here's the original code:


if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
{
document.write('<div id="master'+this.slideshowid+'" class="shoutlayer1">')
document.write('<div id="'+this.canvasbase+'_0" class="shoutlayer2" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;"></div>')
document.write('<div id="'+this.canvasbase+'_1" class="shoutlayer2" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;"></div>')
document.write('<div id="shouthelp" class="shoutlayer2" style="display:none;z-index:1000;"></div>')
document.write('</div>')
}
else
document.write('<div id="defaultslide'+this.slideshowid+'">'+this.postimages[0]+'</div>')

----------

i'm moving this from my js file out the the html file and i'm writing this:


if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
{
document.write('<div id="master0" class="shoutlayer1">');
document.write('<div id="canvas0_0" class="shoutlayer2" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;"></div>');
document.write('<div id="canvas0_1" class="shoutlayer2" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;"></div>');
document.write('<div id="shouthelp" class="shoutlayer2" style="display:none;">hjälp hjälp hjälp</div>');
document.write('</div>');
}
else
document.write('<div id="defaultslide0">'+this.postimages[0]+'</div>')

the problem is the last row. what do i write instead of '+this.postimages[0]+'?

[jscheuer1]

First of all it was:


document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

Which would translate (using what you already have done as a guide) to:


document.write('<div><img name="defaultslide0" src="photo1.jpg"></div>')

Where photo1.jpg is the first image entry in the image array. This part of the markup is only used for older browsers anyway (like IE and NS versions 4.x).

[badtant]

thank you!

what happends if i leave the src blank? i have to since i don't know what content to put there when it's being written...

i have to find an old browser and look.

[jscheuer1]

Probably best to use a transparent.gif image.

[badtant]

on the other hand, i think i skip it completely...
i'm using document.getElementById everywhere so it won't work anyway.

[Twey]

An image element with the source of your first image, I believe. The code around this is a bit messy too.