Ultimate Fade In Slideshow on Facebook Page problems

[bumstah]

1) Script Title:

Ultimate Fade In Slideshow

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...nslideshow.htm


3) Describe problem:

Hello, I am trying to incorporate this beautiful slideshow onto my Facebook Fan page, where I can use HTML, CSS, Javascript freely.

For some reason, the slideshow seems to work for a couple of minutes until it shuts down and goes completely blank. The code I have is as exactly as shown:

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

<script type="text/javascript" src=" https://sites.google.com/site/yelpcss/facebook/fadeslideshow.js?attredirects=0&d=1">

/***********************************************
* 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
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
  wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
  dimensions: [500, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
  imagearray: [
        ["http://img825.imageshack.us/img825/5091/unled1pig.jpg", "http://bit.ly/nerdydancingyelp", "_new", "The nerdier you dance, the better! Make sure to RSVP. Click for more details."],
    ["http://img809.imageshack.us/img809/6184/roboday.jpg", "http://bit.ly/roboday", "_new", "Need some comic books? Rob O. has the scoop on the Sci-Fi Center."],
    ["http://bit.ly/anthonyrnr", "http://bit.ly/rocknrollday", "_new", "Check out some killer photos from last month's event at the Hard Rock Cafe."]
     //<--no trailing comma after very last image element!
  ],
  displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 500, //transition duration (milliseconds)
  descreveal: "ondemand",
  togglerid: "slideshowtoggler"
})
    
</script>


<div id="fadeshow1"></div>

<div id="slideshowtoggler">
  <a href="#" class="prev"><img src="http://img651.imageshack.us/img651/8282/previousu.png" style="border-width:0" /></a> <span class="status" style="margin:0 120px; color: d20000; font-family: verdana; font-size: 8pt; font-weight:bold"></span><a href="#" class="next"><img src="http://img3.imageshack.us/img3/315/nextnl.png" style="border-width:0" /></a>
  </div></center>

<br><br>
<font size="2"><font face="arial">Hey Yelpers!  We want to hear your thoughts! Post your comments, suggestions and confessions on our Wall. Find it on your left side below the profile picture.</font>
<br><br><img src="http://img263.imageshack.us/img263/7963/wallqu.png">

I replaced the <script type="text/javascript" src="fadeslideshow.js"> by uploading the fadeslideshow.js on a good site and linking it directly. Am I doing something wrong? Please help! Any help is appreciated!

[bumstah]

PS the direct link to the facebook page is on

http://www.facebook.com/pages/BETA/2...90322544333196

You should land on the "welcome" page. If not, navigate to the left below the profile picture and click on"Welcome" to see the page. The slideshow appears to be completely blank with only the navigation buttons hovering over empty space.

[Darkhorse]

Open your Facebook page in Firefox and open the Error Console. You will find out why it's not working.

[jscheuer1]

Change:

<script type="text/javascript" src=" https://sites.google.com/site/yelpcss/facebook/fadeslideshow.js?attredirects=0&d=1">

to:

<script type="text/javascript" src="https://sites.google.com/site/yelpcss/facebook/fadeslideshow.js">

[bumstah]

Thank you for the speedy reply. I have made the following changes, but it is still appearing blank.

The error log doesn't show why it's not working.

For some reason, the slideshow works totally fine on my computer, but when I test it on another computer in my house, the slideshow appears blank. I gave the url to a friend and she also said she cannot see the slideshow. I have attached an image of how it looks like without the slideshow.

<center> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/yelpcss/facebook/fadeslideshow.js"> /*********************************************** * 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 ***********************************************/ </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [500, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["http://img825.imageshack.us/img825/5091/unled1pig.jpg", "http://bit.ly/nerdydancingyelp", "_new", "The nerdier you dance, the better! Make sure to RSVP. Click for more details."], ["http://img809.imageshack.us/img809/6184/roboday.jpg", "http://bit.ly/roboday", "_new", "Need some comic books? Rob O. has the scoop on the Sci-Fi Center."], ["http://bit.ly/anthonyrnr", "http://bit.ly/rocknrollday", "_new", "Check out some killer photos from last month's event at the Hard Rock Cafe."] //<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "slideshowtoggler" }) </script> <div id="fadeshow1"></div> <div id="slideshowtoggler"> <a href="#" class="prev"><img src="http://img651.imageshack.us/img651/8282/previousu.png" style="border-width:0" /></a> <span class="status" style="margin:0 120px; color: d20000; font-family: verdana; font-size: 8pt; font-weight:bold"></span><a href="#" class="next"><img src="http://img3.imageshack.us/img3/315/nextnl.png" style="border-width:0" /></a> </div></center> <br><br> <font size="2"><font face="arial">Hey Yelpers! We want to hear your thoughts! Post your comments, suggestions and confessions on our Wall. Find it on your left side below the profile picture.</font> <br><br><img src="http://img263.imageshack.us/img263/7963/wallqu.png">

[jscheuer1]

Why did you remove the line breaks? No one told you to remove those. They are essential for the script on the page to work properly.

The good news is that the slideshow script fadeslideshow.js is now properly linked in.

But you have to restore those line breaks. Just that much will get it working. But for a better experience cross browser, replace everything with this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src=" https://sites.google.com/site/yelpcss/facebook/fadeslideshow.js">

/***********************************************
* 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
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
  wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
  dimensions: [500, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
  imagearray: [
        ["http://img825.imageshack.us/img825/5091/unled1pig.jpg", "http://bit.ly/nerdydancingyelp", "_new", "The nerdier you dance, the better! Make sure to RSVP. Click for more details."],
    ["http://img809.imageshack.us/img809/6184/roboday.jpg", "http://bit.ly/roboday", "_new", "Need some comic books? Rob O. has the scoop on the Sci-Fi Center."],
    ["http://bit.ly/anthonyrnr", "http://bit.ly/rocknrollday", "_new", "Check out some killer photos from last month's event at the Hard Rock Cafe."]
     //<--no trailing comma after very last image element!
  ],
  displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 500, //transition duration (milliseconds)
  descreveal: "ondemand",
  togglerid: "slideshowtoggler"
})
    
</script>
<style type="text/css">
#fadeshow1 {
	height: 350px;
}
#fadeshow1, #slideshowtoggler {
	margin: 0 auto;
	width: 500px;
}
#slideshowtoggler, .descpanelfg {
	text-align: center;
}
</style>

</head>
<body>

<div id="fadeshow1"></div>

<div id="slideshowtoggler">
  <a href="#" class="prev"><img src="http://img651.imageshack.us/img651/8282/previousu.png" style="border-width:0" /></a> <span class="status" style="margin:0 120px; color: d20000; font-family: verdana; font-size: 8pt; font-weight:bold"></span><a href="#" class="next"><img src="http://img3.imageshack.us/img3/315/nextnl.png" style="border-width:0" /></a>
  </div>

<br><br>
<font size="2"><font face="arial">Hey Yelpers!  We want to hear your thoughts! Post your comments, suggestions and confessions on our Wall. Find it on your left side below the profile picture.</font>
<br><br><img src="http://img263.imageshack.us/img263/7963/wallqu.png">
</body>
</html>

[bumstah]

Thank you for the speedy reply john. I tried to implement your code WITH the line breaks and it is still not working properly. I just copied your latest code As is.

However, there is a space where the slideshow should be, but it is still just empty space. So this is relatively good, because in the past there was nothing at all in the space. I have provided a picture of it below.

I did some experimenting and it seems that the slideshow WORKS on firefox, but not on Internet Explorer or Google Chrome. I don't know for Safari.

[jscheuer1]

Looks like you did your best then. I was just doing a Google on:

is javascript allowed on facebook

And got stuff like:

You cannot use Javascript or any other scripting on facebook i've tried,

I think there might be exceptions. But this (inserting scripts onto sites that limit them) isn't my area of expertise. Best to ask Facebook.

[bumstah]

Curse facebook! Thanks for your help John!

[jscheuer1]

Well, they're just trying to protect their users from scams and other privacy invasions that can arise from javascript on a social networking site. And protect themselves from the liability that would arise from allowing such things.

But, as I say, there appear to be exceptions. You should study the facebook docs:

http://developers.facebook.com/docs/

Perhaps more specifically (log in to see more info from this page):

http://www.facebook.com/note.php?note_id=501377617203

Find a forum familiar with this sort of thing:

http://forum.developers.facebook.net/index.php

looks promising.

From what I can tell, something as innocuous as a slideshow should be OK, but that you need to get a key and know how to use it, and it can only be in a tab (looks like you already have that part). Also, where you're hosting the script, might be better if it were your own domain, but that might not matter - might be important in getting the key though. And the key looks like it (the key) would be limited to scripts from that domain.

But It might be simpler or more complicated than that. I just don't have time to wade through the docs and/or post to/read through their forums for you.

Part of the problem is that the focus around javascript and facebook on the web is around making facebook apps for your website and taking advantage of the facebook API as regards friends, etc. for scripts you may want to put on your facebook page.

There doesn't seem to be much in the way of how to run a simple slideshow.

Another thing you could try is finding someone on facebook who has something like what you want to do and asking them how they did it.