First You need to go to
Admin
>> TinyPortal
>> Block Manager
>> Either Chosee Add Left or Right Block.
>> Choose script box
>> add the following code in the Body, Changing the part in
BoldQuote<script language="JavaScript1.2">
var slideshow_width='140px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='225px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="IMAGE1"
dropimages[1]="IMAGE2"
dropimages[2]="IMAGE3"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')
else
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
var curpos=parseInt(slideshow_height)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=parseInt(slideshow_height)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
yes, nicely done. works at http://www.ps3hax.com
now I need to scale some pics to fit the window perfectly.
nice :up: thanks for sharing
How large of an image can one use with this?? 360x400?
Quote from: crip on December 23, 2006, 11:28:06 AM
How large of an image can one use with this?? 360x400?
I've been playing around with it in a center block... you can go larger in the center of course.
A mix of sizes are being used, so far the largest image used is 480x640 and it looks OK and is still able to fit the whole page into a 15 inch monitor.
I need to go back and use images that are all close to the same size to make the whole thing look better.
You can take a look at the result here. (http://www.mykimbrell.com/FamilyForum/index.php)
Looks really kool..
I wanted to display some of the Champs on here (http://www.bootyvote.com). ---
There all about the same size, 300x500..could be a bit bigger..IMO! :P
I'm trying this in a center block. How can I center up the slide show inside the block?
Thanks!
Hi
first thanks for sharing this with us. I have a question, where it says:
dropimages[0]="IMAGE1"
dropimages[1]="IMAGE2"
dropimages[2]="IMAGE3"
Should I put the link to the image that i wnt to be displayed?Thank you
Hey...is there a way to make this a RANDOM slideshow. Can the code be tweaked to make it select the images in a random order? This is really a pretty nice piece of code.
Thanks,
Wally
really like this mod. all the links above seem to be broken though so if you wanna check it out you can on our site http://www.360gathering.com
Quote from: babjusi on May 13, 2007, 08:57:09 PM
Hi
first thanks for sharing this with us. I have a question, where it says:
dropimages[0]="IMAGE1"
dropimages[1]="IMAGE2"
dropimages[2]="IMAGE3"
Should I put the link to the image that i wnt to be displayed?Thank you
new to this and I too would like to know how to link and add more pics
thx
The code you posted is where you add more images.
This is the code where you'll probably add the link.
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
ok i like this, my question is, where do we put the images on the ftp?? :buck2:
var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="IMAGE1"
dropimages[1]="IMAGE2"
dropimages[2]="IMAGE3"
This code tells you that you have to create or use a folder where you put the images in, that folder gets a path on your server, and that is the path you put in where it say IMAGE1 IMAGE2 etc etc
So if you have a folder called "drops" and you put your images in there, the path will be dropimages[0]="/drops/yourimage1_namehere.jpg" and so on
guess i didnt see that part, thanks G6 ;)
Quote from: lowandslow on May 13, 2007, 08:31:43 PM
I'm trying this in a center block. How can I center up the slide show inside the block?
Thanks!
same question here. thanks!
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
to this and see if it works.
document.write('<center><img name="defaultslide" src="'+dropimages[0]+'"></center>')
Quote from: IchBinâ,,¢ on March 17, 2008, 05:59:23 PM
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
to this and see if it works.
document.write('<center><img name="defaultslide" src="'+dropimages[0]+'"></center>')
No go IchBin. Still aligned left on a front page block. Works good though. I'm using it for "Babe of the Month" on a gamers site (mandatory topic in gamer site rule book), and linked it to a post with the poll.
Would be nice to have it centered.
Any other ideas?
That's way too much code for my limited coding skills to figure out.
Edit: If you want to have a look I'll have to change permissions for guests.
Will need to look at it to see why its not working. You can PM me a temp account if you'd like, or just allow guests to view it.
Sent
Gonna have to put it on my site and test the code. Will let you know when I figure it out.
Thanks. I know you're a very busy man, and I appreciate the help.
Find this code:
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')
Change it to this:
if (ie4||dom)
document.write('<div align="center"><div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div></div>')
You da man IchBin. Works like a charm.
Expect a little something extra in the stocking this year at Christmas. ;D
Great great great slideshow! i was looking for this for a while! Thanks!
I've got a question, how can i link the images? So: When you see the image and klik an it you'll go to a page.
Thanks alot!
this coding seems great! good to use in front of tinyportal when no articles are displayed
I can't seem to get this to work. I have it set up in a script box. I made a folder in tp-images called slides to hold my slide show images. This is what my path to the images looks like seems right to me. Where did I goof up?
vd
Quotevar dropimages=new Array()
dropimages[0]="/tp-images/slides/4group.jpg"
dropimages[1]="/tp-images/slides/038.jpg"
dropimages[2]="/tp-images/slides/057_.jpg"
dropimages[3]="/tp-images/slides/2008tourneysm.jpg"
Try it with the full path i.e..
dropimages[0]="http://www.your-site.com/tp-images/slides/4group.jpg"
Quote from: Lesmondâ,,¢ on October 11, 2008, 06:20:14 PM
Try it with the full path i.e..
dropimages[0]="http://www.your-site.com/tp-images/slides/4group.jpg"
I tried that sort of... by making an image folder outside the forum folder and using the full path to it. I just tried again using your suggestion still a no go. thanks
vd
Anytime you have the / at the beginning of the path you're telling the script to look at the root of the harddrive. Try it this way.
dropimages[0]="tp-images/slides/4group.jpg"
If that doesn't work try the full path that your host uses. Something like this:
dropimages[0]="/home/username_here/www/path_to_forum/tp-images/slides/4group.jpg"
Very bizarre. I tried both your suggestions and I'm still not getting anything. Just the title bar shows up on the left side in the portal page. It seems like I should at least be getting a blank image area with the red X.
thanks again.
vd
Well you'll have to figure out the path then. Maybe your host can help you if you can't figure it out.
Just to keep this puzzling situation alive..... I have no trouble placing a link to the images in my slides folder and having it display using BBC or html code in an approiate block using this path
(tp-images/slides/xxxx.jpg). But, the Simple slide show doesn't like it?
vd
Can you post your code that you're trying to use?
Here it is fresh and just failed the test again , with the same path to image that works in an html/bbc block
thank you
vd
<script language="JavaScript1.2">
var slideshow_width='160px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='160px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="tp-images/slides/038.jpg"
dropimages[1]="tp-images/slides/057_.jpg"
dropimages[2]="tp-images/slides/4group.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
{
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden">');
document.write('<div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div>');
document.write('<div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>');
}
else
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
var curpos=parseInt(slideshow_height)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=parseInt(slideshow_height)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
I have edited the code in your post with a change. Try that code and see if that works for you now.
It works. Thanks I will have to look closely to see what you changed, or what I was doing wrong. lol
greatly appreciated!
virtualdave
There was an error where the document.write() function started. I'm not sure how javascript handles line breaks so I just added a document.write function for each line. Then it worked.
Quote from: virtualdave on October 16, 2008, 01:20:49 AM
Here it is fresh and just failed the test again , with the same path to image that works in an html/bbc block
thank you
vd
<script language="JavaScript1.2">
var slideshow_width='160px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='160px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="tp-images/slides/038.jpg"
dropimages[1]="tp-images/slides/057_.jpg"
dropimages[2]="tp-images/slides/4group.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
{
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden">');
document.write('<div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div>');
document.write('<div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>');
}
else
document.write('<img name="defaultslide" src="'+dropimages[0]+'">')
var curpos=parseInt(slideshow_height)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=parseInt(slideshow_height)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
I apologize for posting in old topic, but i have a question regarding this slide show in this topic, is there a way to make those images we add in that slide show to be clickable and how.
Everytime i try to put it in a java block it just warns me about "hack attempt".
Can i fix this thing?
It helps if you post some information so we can help you.
Please read the Posting Guidelines (http://www.tinyportal.net/index.php?topic=581)
Let's say:
1- I copy the code and paste it in a new html & javascript code;
2- i try to save the block and this happens.
What was the title you used for the block? Did it have any apostrophe's in the title, like "Shade's Block"? This is just one of the bugs in TP 1.0 beta 5 that has been fixed in TP 1.0 beta 5-1, the latest version. Please upgrade to that version and see if it solves your problem.
ZarPrime
No. I wasn't using nothing strange in the name, but i have upgraded now the TP to beta 5-1) and now it's working.
Thank you and i'll try to do again the recente aeva media slideshow.
This is goog code thanks.
Can we use link to images this sistem?
gezdirici,
Welcome to the TinyPortal Support Site.
Unfortunately, I don't understand what it is that you are asking. Perhaps you should read and follow our Posting Guidelines (http://www.tinyportal.net/index.php?topic=581) and try to post again, being a little clearer on your request.
ZarPrime