automated uploader?

[robbpa...@hotmail.com]

This is a great Gallery.  He REALLY needs to make a video on how to install and use this.  What I'm looking for is a way to automatically up load images to this gallery and create thumbnails.  Anyone got any ideas?

[Geoff]

 

 If you mean to autoload from a folder...

 

  - add JS function to dynamically create an image array from a folder's contents

  - add JS code to append the DIVs based on the array

 

 Do a search on StackExchange for these - both have been done to death so I won't repost the code.

 

 thumbnails should be created separately as a design feature, and should not be included in a prog like this - it's a huge bandwith hog.

[Geoff]

I worked out a method to incorporate this feature into Camera as a native option.

to camera.js:

 

ADD:

  readDir    : '', // directory from which to read images   ex: '../media/images/large/'
  
  readThumbs   : '', // directory from which to read thumbnails ex: '../media/images/thumbs/'

 

 IN the defaults var.

 

 

ADD:

 

/* Load images from directory --------------------------------------------------- */
 var thisTemp = this;
 function addDiv(file, thumbs)
 {
  var trueFilePath = file.split('../');
  var trueThumbPath = thumbs.split('../');
  thisTemp.append('<div data-src="' + trueFilePath[1] + '" data-thumb="' + trueThumbPath[1] + '"></div>');
 }

 if(opts.readDir.length > 0)
 {
  $.ajax({
   url:'http://YOUR DOMAIN NAME AND LOCATION/getDir.php',
   data:{'getDir':opts.readDir},
   dataType:'json',
   async:false,
   success: function(files)
   {
    if(files)
    {
     for(var i in files)
     {
      var ext = files[i].split('.');
      if(ext[1]) // not directory, . , ..
      {
       if(ext[1] == 'jpg' || ext[1] == 'jpeg' || ext[1] == 'png' || ext[1] == 'gif' || ext[1] == 'bmp') addDiv(opts.readDir + files[i], opts.readThumbs + files[i]);
      }
     }
    }
   }
  });
 }
/* ------------------------------------------------------------------------ */

 

 BEFORE
 
  var wrap = $(this).addClass('camera_wrap');

 

 

This will work given a few conditions.  The originating DIV (i.e. with class="camera_wrap camera_magenta_skin") should be empty, or what is found in the directory will be ADDED to those items. I left this as an option
as apposed to emptying the DIV before refilling it.

 

 

The code in your HTML, PHP would now look something like...

 

    <script>
  jQuery(function()
  {
   jQuery('#camera_wrap_1').camera({
    thumbnails: true,
    readDir: '../media/images/',
    readThumbs: '../media/thumbs/'
   });
  });
 </script>

 

 

These directories are assumed relative to the JS folder. I did not account for absolute addressing (i.e. www.example.com/pictures/ ) and assumed the images would not be branched off of the folder where JS resides.

 

 

CREATE a new file called getDir.php with the following:

 

<?php

 $dir = $_REQUEST['getDir'];
 $files = scandir($dir);
 
 echo json_encode($files);

?>

 

Put it wherever you want on the server, so long as the AJAX call in the previous step is directed to this file.

I will be including this option in the update I am building hopefully with some more handling for different directory structure options, including absolute addresses, etc but you should be able to work with this
and tweak as needed until that time.

Geoff

 

On Tuesday, 8 October 2013 15:23:07 UTC-5, robbpa...@hotmail.com wrote:

[Geoff]

Here is more direct, and less bug prone code (sorry, I was half asleep when I wrote the first version):

 

all of the previous instructions should still be applicable.  There is actually a much better, more direct method, but it requires modification of the code further on - this is a simple patch to the existing code.

 

 

/* Load images from server directory ------------------------------------ */
 var thisTemp = this;
 if(opts.readDir.length > 0)
 {
  $.ajax({
   url:'http://YOUR DOMAIN AND DIRECTORY STRUCTURE/getDir.php',

   data:{'getDir':opts.readDir},
   dataType:'json',
   async:false,
   success: function(files)
   {
    if(files)
    {
     for(var i in files)
     {
      var ext = files[i].split('.');

      if(ext[1]) // not directory, . ..

      {
       if(ext[1] == 'jpg' || ext[1] == 'jpeg' || ext[1] == 'png' || ext[1] == 'gif' || ext[1] == 'bmp')

       {
        var file = opts.readDir + files[i];

        var trueFilePath = file.split('../');

        var newDiv = document.createElement('div');
        newDiv.setAttribute('data-src', trueFilePath[1]);
        
        if(opts.readThumbs.length > 0)
        {
         var thumbs = opts.readThumbs + files[i];

         var trueThumbPath = thumbs.split('../');

         newDiv.setAttribute('data-thumb', trueThumbPath[1]);
        }
        thisTemp.append(newDiv);
       }       
      }
     }
    }
   }
  });
 }
/* ------------------------------------------------------------------------ */

On Tuesday, 8 October 2013 15:23:07 UTC-5, robbpa...@hotmail.com wrote:

[Allan Fonroques]

Thank you :)

But, what is the html code to call the images ?

Example:

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

[Geoff]

  Since it runs on the selector (in your case "camera_wrap") there is html 'code' to call it, everything is handled in camera.js - an empty div with the correct selector is all that is needed.

  Geoff

[bardon...@gmail.com]