SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript JQuery Slideshow(the other half)

    [in addition to my other topic/although on a separate note]

    Okay this is what I want to do:
    To have a slideshow that reads content of a folder and then shows the pictures and has a little fade effect between each image transition.

    To achieve this I've done the following:
    1. I'm using a php script to read the contents of a folder and spits out the results in an array that I can use within my java script

    2. im using jquery.cycle plugin to add the "fade" effect.

    Now my problem is that my images are shown but i cant get the fade effect from JQuery cycle plugin to have any any effects on my images.

    here is how my code looks like:

    My php file:

    PHP Code:
    PHP Code:
    <?
    //PHP SCRIPT: getimages.php
    header('content-type: application/x-javascript');

    //This function gets the file names of all images in the current directory
    //and ouputs them as a JavaScript array
    function returnimages($dirname="./images") {
         
    $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"//valid image extensions
         
    $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 .'";' "\n";
                 
    $curimage++;
                        } 
                }

                
    closedir($handle);
    }
            
    sort($files);
            return(
    $files);
    }

    echo 
    'var galleryarray=new Array();' "\n"//Define array in JavaScript
    returnimages() //Output the array elements containing the image file names

    ?>
    My html file:

    Code:
    Code:
    <html>
    <meta http-equiv="refresh" content="1000"/> 
    <head>
    <title>Media Signage Slideshow</title>
    <style type="text/css">
    .pics {  
        height:  232px;  
        width:   232px;  
        padding: 0;  
        margin:  0;  
    } 
     
    .picsimg {  
        padding: 0px;  
        border:  0px solid #ccc;  
        background-color: #eee;  
        width:  200px; 
        height: 200px; 
        top:  0; 
        left: 0 
    }
        #slideshow { height: 100%px; width: 100%px; margin: auto }
        #slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    	#slide {width: 370px; height: 220px; padding: 0;  margin:  0 auto; }
    	
    	#myslides {
    	width: 370px;
    	height: 220px;
        padding: 0;  
        margin:  0 auto;  
    } 
     
    #myslides img {  
        padding: 10px;  
        border:  1px solid rgb(100,100,100);  
        background-color: rgb(230,230,230);
        width: 350px;
        height: 200px;
        top:  0; 
        left: 0 
    }
         
    </style>
    </head>
    <!-- include jQuery library -->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myslides').cycle({
                   fx: 'fade',
    				speed: 5000,
    				timeout: 2000
            });
    });
    </script>
    
    <script type="text/javascript">
    
    var curimg=0;
    function rotateimages(){
    galleryarray.sort();
    document.getElementById("myslides").setAttribute("src", "images/"+galleryarray[curimg]);
    curimg = (curimg+1) % galleryarray.length;
    }
    
    $('#myslides').ready(function() {
      $('#myslides').fadeOut('slow', function() {
        // Animation complete.
      });
    });
    
    window.onload = function(){
    setInterval("rotateimages()", 5000);
    }
    
    
    </script>
    
    
    
    <script type="text/javascript" language="JavaScript" src="./code.php"></script>
    
    
    <body>
    
    <img id="myslides" src="100.jpg">
    
    
    <!-- <div id="myslides"> -->
      <!--<img src="100.jpg" />
      <img src="101.jpg" /> -->
    
    </body>
    </html>

    Please tell me how to fix it.

  2. #2
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are so many things wrong with this code, but you cannot mix php/javascript the way you are doing it, unless you also echo: "<script>....." over the Javascript. Plus, why do you create a function with a parameter when you pass no argument in you function call?
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im just beginning to learn php/javascript
    Can you please fix my code? //or if you think this code is beyond fixing suggest a better way.

    As long as my code reads the contents of folder and i can have animation (fade) between them It dossent matter what language or approach you want to use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •