ansaurus

Question

Create an array for simpleGallery (jquery plugin)

Answer 1

A:

Well, I'm not sure that this is what you're looking for and it certainly isn't pretty. But after ten minutes or so of playing around with (the quite impressive) simplegallery demo, I cobbled* this together

<?php

// variables

$dir = "img"; // <- the directory in which your images are stored, I've omitted the closing '/' deliberately.

$images = scandir($dir); // <- builds an array of images from the folder, above.

// foreach, below, removes the "." and ".." relative paths
foreach($images as $key => $value) {

    if ($value == "." || $value == "..") {
     unset($images[$key]);
    }

}
// gets the imagesize for the last (entirely arbitrary) image in the $images variable.
$img_dimensions = getimagesize($dir ."/" . end($images));

     if ($images) {

      foreach($images as $k => $v) {
       if (end($images)) {
       $simplegallery_image_array .= "[\"$dir/$v\", \"\", \"\", \"\"],\n\t";
       }
      }

     }

$simplegallery_image_array = rtrim($simplegallery_image_array,","); // removes the last comma generated from the above foreach.

/*

I know that foreach loops are inefficient, but I couldn't think of an easier way. If there's an easier way, please, let me know =)

*/

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Stu's gallery</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/simplegallery.js"></script>

<!-- Stuff for simplegallery, from: http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm on 27/08/09 -->

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (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 simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [<?php echo $img_dimensions[0] ;?>, <?php echo $img_dimensions[1] ;?>], /* inserts image dimensions width then height */
    imagearray: [
    <?php
     echo "$simplegallery_image_array";
    ?>
    ],
    autoplay: [true, 1500, 5], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
     //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
     //Keyword "this": references current gallery instance
     //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
     //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})

</script>
<!-- End of Simplegallery-->

</head>

<body>
<div class="gallery_demo_unstyled">
<?php
    if ($images) {
?>
    <div id="simplegallery1">
     <ul>
<?php
     foreach($images as $k => $v) {
      $i++;
      echo "\n\t\t<li><img src=\"thumbs/$images[$k]\" /><span class=\"imgNum\">$i</span></li>";
     }
?>


     </ul>
    </div>
<?php
    }

?>
</div>
</div>
</body>

</html>

I'd like to say 'hacked' but that would unjustly dignify my terrible, terrible atttempt.

David Thomas 2009-08-27 19:39:35

I saw a question on so similar to this answered like you did. my js file is seperate from the php scripts, hence hte ajax call insead. I would like to keep them seperate if possible. if I can't figure out why the js arrays aredifferent i may have to go that way to make it work the way I want it to. I would vote you up but I don't have a high enough reputation at this point ...

hippee-lee 2009-08-27 20:54:31

I ended up taking a hybred approach and echoed out the string from php into a js var up top like you were doing. I would still like to know what is different from creating a js array like this var rand_pix = [ ["path/to/image", "path/to/image", "", "" ], ["path/to/image", "path/to/image", "", "" ] ]; and a js array thats created by using push to add elements if anyone knows. Thanks ricebowl.

hippee-lee 2009-08-28 02:26:43

@hippee-lee, you're more than welcome; I just wish I could answer your question (in the above comments) =)

David Thomas 2009-08-30 16:25:48

ansaurus

tags:

views:

answers:

Create an array for simpleGallery (jquery plugin)

related questions