4 Replies - 1769 Views - Last Post: 20 December 2012 - 02:06 AM

#1 grichter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-September 12

Add Fade Transition to PHP Generated Slideshow Array

Posted 19 December 2012 - 02:29 PM

I have a PHP / JS slideshow script where the images used for the slideshow reside in a directory outside of the html page and a PHP script grabs all images in this directory and then creates an array, and passes it to a piece of Javascript on the html page. This allows for the site owner (who is not a dev) to easily update their slideshow by either adding or removing images from this directory.

My issue is, I can't seem to figure out how to do a simple fade in transition for each image as they are dynamically loaded. After playing around a bit, I'm able to get the first image to fade in, but none of the rest. I know my issue is that I have a single 'img' element on the page, but not sure where to go from here. Any help / suggestions are much appreciated!!

Here is the HTML / JS snippet:
<script src="phpslide/getimages.php"></script>
<script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "phpslide/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval(rotateimages, 3500);
setTimeout("fadein()",1000);
}
</script>
<div id="home_images"><img id="slideshow" src="phpslide/image_1.jpg" /></div>
 </div>



And here is the getimages.php file:
<?
Header("content-type: text/javascript");
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; 
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a Javascript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var galleryarray=new Array();'; //Define array in Javascript
returnimages() //Output the array elements containing the image file names
?>



Thanks
Gregg

Is This A Good Question/Topic? 0
  • +

Replies To: Add Fade Transition to PHP Generated Slideshow Array

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3325
  • View blog
  • Posts: 11,246
  • Joined: 12-December 12

Re: Add Fade Transition to PHP Generated Slideshow Array

Posted 19 December 2012 - 02:38 PM

The opening PHP tag is <?php not <? but this may not be the main issue.
Was This Post Helpful? 0
  • +
  • -

#3 nathanpc  Icon User is offline

  • SCIENCE!
  • member icon

Reputation: 112
  • View blog
  • Posts: 1,171
  • Joined: 31-July 09

Re: Add Fade Transition to PHP Generated Slideshow Array

Posted 19 December 2012 - 02:57 PM

I would suggest you to take a look at CSS Transitions, a great article to understand them is Using CSS transitions. Another great resource for your case would be Cross fading images with CSS Transitions.
Was This Post Helpful? 0
  • +
  • -

#4 grichter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 18-September 12

Re: Add Fade Transition to PHP Generated Slideshow Array

Posted 19 December 2012 - 03:16 PM

Thanks for the bit on the PHP tag, I've corrected that, but that's not the cause of the issue.

Using a separate jQuery script, i'm able to get the inital image to fade, but the rest of the images just rotate w/ no fade. Again, I believe this is related to the fact that there is actually only a single image on the page for the slideshow, and the PHP script is setting an attribute to allow the image to be rotated. How can I then get the fadein to apply to all of the successive images behind it?

Here is the updated code for the page:

<script src="phpslide/getimages.php"></script>
     
<div id="home_images"><img id="slideshow" src="phpslide/image_1.jpg" /></div>

<script type="text/javascript">
var curimg=0

function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "phpslide/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}

window.onload=function(){
setInterval(rotateimages, 3500);

}
</script>

<script type="text/javascript">
$(function(){
	$('#home_images img').hide();				
	$('#home_images img').fadeIn(1000);
	});
</script>



Thanks
Gregg
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3325
  • View blog
  • Posts: 11,246
  • Joined: 12-December 12

Re: Add Fade Transition to PHP Generated Slideshow Array

Posted 20 December 2012 - 02:06 AM

Print the array just after the page has loaded:

$(function(){
    console.log(galleryarray);

The press F12 to open the browser's developer tools or console, look in the Console window. While you are there check any error messages? In Firefox you may need to install Firebug.

Is the array correct?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1