Log in

View Full Version : Ultimate Fade-in slide show and Wordpress


nebullaone
01-23-2012, 11:51 PM
1) Script Title: Ultimate Fade-in slide show v2.4

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Hello everyone. I am hoping someone can help me with this because I am going a little crazy trying to get this to work :confused:. I am creating my own wordpress theme, and am trying to incorporate this slideshow. Here is my code in my header.php:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [443, 255], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["<?php bloginfo('template_directory'); ?>/images/home-slideshow/slideshow.jpg", "", "", ""],
["<?php bloginfo('template_directory'); ?>/images/home-slideshow/slideshow.jpg", "", "", ""] //<--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: ""
})

</script>

I have also tried:

["/images/home-slideshow/slideshow.jpg", "", "", ""]

and

["images/home-slideshow/slideshow.jpg", "", "", ""]

but still not working.

And my code in index.php:

<div style="margin-left:auto; margin-right:auto; width:443px;" id="fadeshow1"></div>

The gallery is just not showing up. I am not receiving any error messages or anything. It's just not working. Any ideas what I am missing?

Thanks
jscheuer1
01-24-2012, 01:25 AM
If it's not showing up at all, the script is probably missing. If you have a black rectangle where the slideshow should be, the script is there but the images are probably missing.

Load the page up in the browser. Use the browser's 'view source'. That will tell you how:


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/fadeslideshow.js"></script>

is being resolved. If that doesn't point to the script, fix it so that it does.

If your browser has developer tools, once the script is functioning you can use its DOM inspector to trace where the script is looking for the images. Again, if they're not there, adjust your code until they are.

If you want more help, put the thing up live somewhere and post a link to it.
nebullaone
01-24-2012, 11:24 PM
Hello,

Thanks for your reply. I put up the site at a temporary location:

http://icontablet.com/

The slideshow should be at the top header, on the right side where you see a big white box.

When I viewed the source in the browser, it seems to me that everything is there. Both the script and the images are there. I just don't understand what I'm missing.

Thanks



If it's not showing up at all, the script is probably missing. If you have a black rectangle where the slideshow should be, the script is there but the images are probably missing.

Load the page up in the browser. Use the browser's 'view source'. That will tell you how:



is being resolved. If that doesn't point to the script, fix it so that it does.

If your browser has developer tools, once the script is functioning you can use its DOM inspector to trace where the script is looking for the images. Again, if they're not there, adjust your code until they are.

If you want more help, put the thing up live somewhere and post a link to it.
jscheuer1
01-25-2012, 01:14 AM
You also need a coy of jQuery for the page. The demo page uses version 1.4.2, but only because that was the latest at that time. Version(s) 1.7.x is/are out now, but the last really stable one is 1.6.4, and it outperforms 1.4.2.

Anyways, add the highlighted as shown:


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Integrated Nanosystems Research Facility</title>

<link rel="stylesheet" href="http://icontablet.com/wp-content/themes/inrf/style.css" type="text/css" />
<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://icontablet.com/wp-content/themes/inrf/js/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank D . . .

The browser cache may need to be cleared and/or the page refreshed to see changes.
nebullaone
01-26-2012, 02:28 AM
Wahooo! That did the trick! THANK YOU very much for your help!!! :)


You also need a coy of jQuery for the page. The demo page uses version 1.4.2, but only because that was the latest at that time. Version(s) 1.7.x is/are out now, but the last really stable one is 1.6.4, and it outperforms 1.4.2.

Anyways, add the highlighted as shown:


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Integrated Nanosystems Research Facility</title>

<link rel="stylesheet" href="http://icontablet.com/wp-content/themes/inrf/style.css" type="text/css" />
<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://icontablet.com/wp-content/themes/inrf/js/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank D . . .

The browser cache may need to be cleared and/or the page refreshed to see changes.