PDA

View Full Version : Ultimate Fade-in Slideshow help



cpb09e
03-28-2012, 02:24 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: I am trying to create the slideshow on a PHP site. I have two different files: header.php (I put the script type in here) and a index.php (I put the div id info here). I cannot get the slideshow to work.

I also have a question about the following code:


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

<div id="fadeshow2"></div>
<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

What is the img src pointing at? In the script type, they give you the 4 places to place your images. So, I am not sure what these images are supposed to be?

Thanks for any help!

jscheuer1
03-28-2012, 03:09 PM
When you have a PHP page, regardless of where the content on it comes from, the browser sees it as an ordinary HTML page. All of the including and substitutions, etc. done via PHP are done by the server before the page is sent to the browser. You can even use your browser's 'view source' to see what the server is sending to the browser. It should look like an ordinary HTML page with one DOCTYPE, one html tag containing, one head and one body tag. If it doesn't, you've done something wrong.

And, since it appears to the browser as a single HTML page, the paths on it must be valid for the folder that it's in. Absolute paths can usually be used if there's any doubt.

The image src attributes in the code block in your post pointed to a left arrow and a right arrow image. But some time after the demo page was built, the image host (tinypic.com) removed them, so now they just point to a generic image moved/removed image. If you want to use the toggler division feature with images, you need to get your own left and right arrow images. Or you can use buttons:


<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<input type="button" class="prev" value="&lt;"> <span class="status" style="margin:0 50px; font-weight:bold"></span> <input type="button" class="next" value="&gt;">
</div>

The four image in the code:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Are also hosted on tinypic.com, most of them are still there at least I think. You can substitute your own images there. Use the same information as you would for the src attribute of an image tag. These are the slideshow images.

Like if you have an image tag like this that works:


<img src="myimage.jpg" alt="">

You can put in the imagearray:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["myimage.jpg"],
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Now there will be 5 images instead of 4, and the first one will be the myimage.jpg image.

You can add or remove lines from the array.

cpb09e
03-28-2012, 03:29 PM
I have updated and now have the 'prev' and 'next' arrows.

However, I am still having a problem running the slideshow. This is what my header.php page looks like:


<head>
<title>Antarctic Marine Geology Research Facility</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Javascripts -->

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiCg0XiEsv-BM_gj1E4W45BQa6VwUSeqn8wmBX-fO_BEexrziYBQUx_Xn_IQN7J6tja8TluInDIC6DA"
type="text/javascript"></script>
<!-- START Requirements for accordian -->
<script src="/includes/javascripts/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="/includes/javascripts/jquery-ui-personalized-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/includes/javascripts/jquery.jmap.js" type="text/javascript" charset="utf-8"></script>
<!-- My Code -->
<script src="/includes/javascripts/arf_core.js" type="text/javascript" charset="utf-8"></script>
<!-- END Requirements for accordian -->
<script type="text/javascript" src="/includes/javascripts/swfobject.js"></script>
<!-- Inline Javascript -->
<script type="text/javascript">
// Format: path_to_swf_file, div id to place content, width, height, version (9.0.0 for recent)
swfobject.embedSWF("/includes/arfFlash2.swf", "flashcontent", "850", "100", "7.0.19"); </script>


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

<script type="text/javascript" src="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: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

<!-- CSS -->

<link rel="stylesheet" href="/includes/screen.css" type="text/css" media="screen" title="ARF Screen Style" charset="utf-8" />

</head>


<body>
<div id="core">
<div id="header">
<div id="headerImage">
<img src="/images/ARFHeader_logo.jpg" width="850" height="150" alt="" />
</div>
</div>
<div id="flashcontent">
<p>Flash Player Not Detected or Javascript is disabled</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!-- SIDEBAR START -->
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/menu.php"); ?>

<!-- SIDEBAR END -->

<div id="content">
<div class="inner">
<!-- HEADER END -->
<!-- CONTENT START -->

And this is what my index.php code looks like:


<?php include($_SERVER['DOCUMENT_ROOT']."/includes/header.php"); ?>

<!-- CONTENT START -->
<h2>Latest News</h2>
<img class="image" src="/images/blueline.jpg" width="400" height="4" alt="" />


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

<div id="fadeshow2"></div>
<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<input type="button" class="prev" value="&lt;"> <span class="status" style="margin:0 50px; font-weight:bold"></span> <input type="button" class="next" value="&gt;">

</div>
<br />

<div class="newsItem">
<img class="image newsImage" src="/images/gallery.jpg" width="101" height="76" alt="" />
<h3><a href="/news/gallery.php" title="Photo Galleries">Photo Galleries</a></h3><br />
<p>
Photo galleries are now available for X-Radiographs, Bottom photographs and Core photographs.<br />
</p>
</div>
<div class="newsItem">
<img class="image newsImage" src="/images/mobile_shelving/progress2.JPG" width="101" height="76" alt="" />
<h3><a href="/news/facility_renovation.php" title="Facility Renovation">Facility Renovation</a></h3><br />
<p>
Cold room renovation Phase 1 and Phase 2<br />
</p>
</div>

<div class="newsItem">
<img class="image newsImage" src="/images/equipments/Digital_x-ray.jpg" width="101" height="76" alt="" />
<h3><a href="/equipment/index.php" title="Equipment Additions">Equipment Additions</a></h3><br />
<p>
List and availability of equipment<br />
</p>
</div>
<div class="newsItem">
<img class="image newsImage" src="/images/IMG_1614s.jpg" width="101" height="76" alt="" />
<h3><a href="/news/database_initiatives.php" title="Database Initiatives">Database Initiatives</a></h3><br />
<p>
Ongoing efforts to increase AMGRF data availability.<br />
</p>
</div>


<div class="clearer">
&nbsp;

</div>


<!--h3>Facility Calendar </h3>
<img class="image" src="/images/blueline.jpg" width="400" height="4" alt="" />
<p>
<a href="calendar" style="background-color:#EEF2F7"><img class="image newsImage" src="/images/calendar2.gif" width="84" height="75" alt="Facility Calendar"/></a>
</p>
<ul class="listnav">
<li><a href="calendar/events.php">Events</a></li>
<li><a href="calendar/visitors.php">Visitors</a></li>
</ul-->
<!-- CONTENT END -->

<!-- CONTENT END --><!-- The Footer -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15450169-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/footer.php"); ?>

jscheuer1
03-28-2012, 05:31 PM
It looks like it should work, or at least could work. As I said though, what really matters is what the server is sending to the browser. You can use the browser's 'view source' to see that.

I also notice that an earlier version of jQuery is already on the page. That might be a factor. Since fadeslideshow.js is in noConflict mode, it might work out better to put its scripts first in the head:


<head>
<title>Antarctic Marine Geology Research Facility</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Javascripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="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: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiCg0XiEsv-BM_gj1E4W45BQa6VwUSeqn8wmBX-fO_BEexrziYBQUx_Xn_IQN7J6tja8TluInDIC6DA"
type="text/javascript"></script>
<!-- START Requirements for accordian -->
<script src="/includes/javascripts/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="/includes/javascripts/jquery-ui-personalized-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/includes/javascripts/jquery.jmap.js" type="text/javascript" charset="utf-8"></script>
<!-- My Code -->
<script src="/includes/javascripts/arf_core.js" type="text/javascript" charset="utf-8"></script>
<!-- END Requirements for accordian -->
<script type="text/javascript" src="/includes/javascripts/swfobject.js"></script>
<!-- Inline Javascript -->
<script type="text/javascript">
// Format: path_to_swf_file, div id to place content, width, height, version (9.0.0 for recent)
swfobject.embedSWF("/includes/arfFlash2.swf", "flashcontent", "850", "100", "7.0.19"); </script>




<!-- CSS -->

<link rel="stylesheet" href="/includes/screen.css" type="text/css" media="screen" title="ARF Screen Style" charset="utf-8" />

</head>


<body>
<div id="core">
<div id="header">
<div id="headerImage">
<img src="/images/ARFHeader_logo.jpg" width="850" height="150" alt="" />
</div>
</div>
<div id="flashcontent">
<p>Flash Player Not Detected or Javascript is disabled</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!-- SIDEBAR START -->
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/menu.php"); ?>

<!-- SIDEBAR END -->

<div id="content">
<div class="inner">
<!-- HEADER END -->
<!-- CONTENT START -->

And the path to the fadeslideshow.js file is the only relative path. All the others are either network paths (beginning with /) meaning they are sought from the root of the domain, or absolute paths. A relative path must be correct for the location of the PHP file, not the include. Make sure the path to fadeslideshow.js is correct for the 'top' page (the one that includes).

If you want more help, please post a link to the page.