Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Adding a small slideshow/animation
Muklokk (New Admin) 6/16/2008 7:38 PM EST : Adding a small slideshow/animation

Muklokk
Posts: 261
Fingers of Fury!

We have a section on our page where we put in funny pictures or gems we get shots of during our gameplay.
(incarnate.guildportal.com)(on the left side)
Well, I got a few pics in a row recently of an extremely funny raid involved situation that came out pretty funny when you flip through them.  I don't have much experience with this stuff but is there a way to put 2 or more uploaded pictures into a single space where it will flip through them infinately (Example: pic 1,pic 2, pic 3, pic 1, pic 2, pic....etc)one frame per second (or something like that) using the guildportal tools?
TopBottom

Mottie (MVP) 6/16/2008 7:58 PM EST : RE: Adding a small slideshow/animation
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Image box | Image box with descriptions | Image box with slideshow | Image box with random slideshow | Image box w/facebox | Image box w/Albums

I don't think there are any GuildPortal tools that will do what you want.

But, I think the easiest way to do it would be to display a Flickr slide show. You can make "sets" in Flickr that will only show certain images in a slide show. Additionally, Flickr will give you an e-mail address that you can post in your forums that allows members to e-mail images that automatically get added to the album.

I made a post about how to do this a few weeks ago - read it here. Ignore the top part of the post as it only shows how to post a thumbnail album.

Edit: Added a link bar at the top to the different versions of the image viewer posted in this thread.
TopBottom

Muklokk (New Admin) 6/16/2008 8:39 PM EST : RE: Adding a small slideshow/animation

Muklokk
Posts: 261
Fingers of Fury!

Tried it out, ended up with
<iframe src="http://www.flickr.com/photos/27720079@N05/show/" frameborder="0" height="600" width="800"></iframe>

I tried putting that into the news box, or on forums, it shows up just like that, doesn't turn into the gallery.  Tried it in an image link also (wasn't sure if I was doing it wrong), nothing happened.  Any idea what I'm doing wrong?
TopBottom

Mottie (MVP) 6/17/2008 4:09 AM EST : RE: Adding a small slideshow/animation
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Yeah, sorry I should have said you need to put that code into a "Free Form Text/HTML" box. It's because GuildPortal won't let you put iframes into posts now. I posted about it here.

Also, don't forget to click on the "<>" in the bottom left corner of the content editor before pasting the code into it.

Edit: Oh I did find a way around the silly iframes problem:
  • Copy all the information inside the post/news box and paste it into a text editor for safe keeping just in case.
  • Delete the post.
  • Make a brand NEW post
  • Paste the code into it and save it
It only works if you put it in a new post. If you ever go back and decide to edit some content. Repeat the steps above, as doing ANY editing will make it convert the iframe into a link.
TopBottom

Rhiannanna (Guild Admin) 6/19/2008 10:00 PM EST : RE: Adding a small slideshow/animation
Rhiannanna
Posts: 1501
Zomgawsh Poster

We have one on our site for 'meet the team' (see it working at www.the-killer-carebears.co.uk top right of the homepage), unfortunatly i could not make the coding to make it 'flip' however until i work it out we use the coding, to adapt it for your use. it will for a slideshow allowing you to flick through the images using 'next' and 'previous' buttons

the script is available at
http://www.hscripts.com/scripts/JavaScript/slide-show-software.php

the forums wont allow me to post the script itself in the post

Hope that is of some use

/rhia





TopBottom

Mottie (MVP) 6/21/2008 6:05 AM EST : RE: Adding a small slideshow/animation
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Rhia,

I saw that image viewer on your site and I liked it

You said you couldn't get it to flip over when it hit the beginning or end, so I "tweeked" it for you

Also, you can post javascript in the forums if you highlight and colorize anytime you see the word "script". I made them all black in color (to match the forum color)... I guess the forum ignores it if you colorize it LOL... so here it what your script will look like (I left in the copyright thingy)
<!--        Script by hscripts.com          -->
<!--        copyright of HIOX INDIA         -->
<!-- more scripts @ http://www.hscripts.com -->

<script language="javascript">
var imgAr1 = new Array();
var rImg1 = new Array();

var width = 200;
var height = 175;

imgAr1[0] = "http://www.freewebs.com/psylentcarebear/pinkcinne%20copy.gif";
imgAr1[1] = "http://www.freewebs.com/psylentcarebear/DWblue%20copy.gif";
imgAr1[2] = "http://www.freewebs.com/psylentcarebear/durin%20copy.gif";
imgAr1[3] = "http://www.freewebs.com/psylentcarebear/Haal.gif";
imgAr1[4] = "http://www.freewebs.com/psylentcarebear/mwindo%20copy.gif";
imgAr1[5] = "http://www.freewebs.com/psylentcarebear/redrhia%20copy.gif";
imgAr1[6] = "http://www.freewebs.com/psylentcarebear/Noc.gif";
</script>

<table cellpadding="0" cellspacing="0"><tbody><tr><td style="border: 2px ridge red;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table style="border: 2px ridge red; font-size: 13px; font-family: verdana,arial;" width="100%">
<tbody><tr><td align="center"><a style="color: white; cursor: pointer;" onclick="start()">Start</a></td>

<td align="center"><a style="color: white; cursor: pointer;" onclick="slideshow()">Next</a></td>
<td align="center"><a style="color: white; cursor: pointer;" onclick="prev()">Prev</a></td>
<td align="center"><a style="color: white; cursor: pointer;" onclick="end()">End</a></td>
<td align="center"><a href="http://www.hscripts.com" style="color: white; text-decoration: none; font-size: 13px;">&#169;H</a></td>
</tr></tbody></table>
</td></tr></tbody></table>

<script language="javascript">

for(var j = 0; j < imgAr1.length; j++)
{
rImg1[j] = new Image();
rImg1[j].src = imgAr1[j];
}

document. = setting();

var slide;
function setting()
{
slide = document.getElementById('pic');
slide.src = imgAr1[0];
slide.setAttribute("width",width);
slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
picture++;
if(picture == imgAr1.length) picture=0;
slide.src = imgAr1[picture];
}

function prev(){
picture--
if(picture < 0) picture=imgAr1.length-1;
slide.src = imgAr1[picture];
}

function start(){
slide.src = imgAr1[0];
picture = 0;
}

function end(){
slide.src = imgAr1[imgAr1.length-1];
picture = imgAr1.length-1
}
</script>
<!-- Script by hscripts.com -->
If someone else wants to use this script on their site, just change:
  • The URLs in green, add or remove the "imgAr1[ ]" = as needed
  • The height and width in blue
  • The colors you want the text and borders in orange. You can either type in the color name or use the RGB code ( e.g. red = #ff0000 ). See all the named color options here
TopBottom

electraoutlaw (Guild Admin) 6/21/2008 9:52 AM EST : RE: Adding a small slideshow/animation
electraoutlaw
Posts: 1172
Zomgawsh Poster

I love you Mottie.
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Mottie (MVP) 6/21/2008 2:02 PM EST : RE: Adding a small slideshow/animation
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

*blush*
TopBottom

electraoutlaw (Guild Admin) 6/21/2008 2:37 PM EST : RE: Adding a small slideshow/animation
electraoutlaw
Posts: 1172
Zomgawsh Poster

Thank you Rhiannanna and Mottie for some excellent info.
Check out what you showed me how to do on the About Us Page for my guild!!

EO is very happy. 
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Mottie (MVP) 6/21/2008 5:03 PM EST : RE: Adding a small slideshow/animation
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Image box | Image box with descriptions | Image box with slideshow | Image box with random slideshow | Image box w/facebox | Image box w/Albums

Well because I'm picky *blink*... I made a few more changes LOL



I changed three things:
  • The copyright notice is replaced by the current slide number. You will now see a number over the number of images (1/7)
  • I also got rid of the numbering of your slides... I know it's a pain to make sure you have them all numbered right. 
  • And I made it so if you click on the image, you go to the next slide.
Here is the new code:
<!-- Original Script (c) http://www.hscripts.com -->
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
 <td style="border: 2px ridge red;"><img id="pic" onclick="slideshow()" border="0"></td>
</tr>
<tr>
 <td><table style="border: 2px ridge red; font-size: 13px; font-family: verdana,arial;" width="100%">
  <tbody><tr>
    <td align="center"><a style="color: white; cursor: pointer;" onclick="start()">Start</a></td>
    <td align="center"><a style="color: white; cursor: pointer;" onclick="slideshow()">Next</a></td>
    <td align="center"><a style="color: white; cursor: pointer;" onclick="prev()">Prev</a></td>
    <td align="center"><a style="color: white; cursor: pointer;" onclick="end()">End</a></td>
    <td align="center"><div id="currentNumber"></div></td>
   </tr></tbody>
  </table></td>
</tr>
</tbody></table>
<script language="javascript">
var myimages = new Array();
var preload = new Array();
var picture = 0;
var slide;

// *****************************
// To add more images, add
// myimages.push ("URL HERE");
// *****************************

var width = 200;
var height = 175;

myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie4.gif");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie3.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie2.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie1.jpg");
myimages.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/myavie0.jpg");

// *****************************
// DON'T change anything below
// *****************************
for(var j = 0; j < myimages.length; j++) {
 preload[j] = new Image();
 preload[j].src = myimages[j];
}
document. = setting();
function setting() {
 slide = document.getElementById('pic');
 slide.src = myimages[0];
 slide.setAttribute("width",width);
 slide.setAttribute("height",height);
 showing(0);
}
function slideshow(){
 picture++;
 if(picture == myimages.length) picture=0;
 slide.src = myimages[picture];
 showing(picture);
}
function prev(){
 picture--
 if(picture < 0) picture=myimages.length-1;
 slide.src = myimages[picture];
 showing(picture);
}
function start(){
 slide.src = myimages[0];
 picture = 0;
 showing(picture);
}
function end(){
 slide.src = myimages[myimages.length-1];
 picture = myimages.length-1
 showing(picture);
}
function showing(cn) {
 var a = (cn+1) + "/" + (myimages.length);
 document.getElementById('currentNumber').innerHTML = a;
 return false;
}
</script>
<!-- End Script -->

Edit: Added an image & changed the image links
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%