New upload feature preview

By calling files selection by flash, you can choose multiple files at once (or whole folder with Ctrl+a), which is not possible only with HTML~JS. That means, that you do not have to select all files one by one, and smash your head on keyboard after 101st image. All files are than inserted into an upload queue, which is triggered by the “Upload files” button. Everything is take care of by AJAX, so there is no need for site reloading, and you can see how you gallery is filling with images :)

Demo presentation

1.09KB 337x

Application files

7.64KB 197x

Bugs & suggestions

Report all bugs here as comments (or as comments on main MyGallery page on www.darsain.net).

If you have some suggestion, or feature requests … same way as with bugs :) just write them down here.

Future plans

In the next update I would like to jump straight to version 2.0, because I want to redesign the whole thing, and change app structure. I would love to recreate it to looks and function more like Deviantart Portfolio application.

We will write 2 functions for creating thumbnails from random image (png, jpg, gif). First function will take thumbnail width and height set by you, and cut the “most important” part from the image (I’m assuming, that you are creating thumbnails of websites, so center top is the area I’m talking about) according to thumbnail ratio, and resize it into your thumbnail in exact size that you’ve set. Second function will take max thumbnail width and height set by you, and resize the image so it will fit your max values, but with preserving its original resolution ratio.

1.) Generate thumbnail of exact size

This function will cut the biggest possible top center of image, so it can be resized into width and height you need without deforming it. The advantage of this method is, taht all thumbnails have same resolution, therefore they can be easily styled on website, and it just looks better. Disadvantage is, that sometimes, it could cut the important part of image.
For better understanding, click on the image below.

Lets define the function:

create_thumb( string $source_path, string $destination_path, int $thumb_width, int $thumb_height [, int $quality [, int $overwrite]] )

Parameters:

• $source_path: Path to source image (jpg, jpeg, png, gif).
• $destination_path: Thumbnail destination path. It has to have *.jpg extension, as all thumbnails will be generated in jpg.
• $thumb_width: Final thumbnail width.
• $thumb_height: Final thumbnail height.
• $quality: JPG compression quality (bigger: better quality,larger file). Range 0-100 (optimal 85).
• $overwrite: Set as true if you wan this function to overwrite thumbnail if it already exists.

Lets start with code. I’m lazy to comment every line, so I’ll just paste the whole function with comments in code :) Also, I was asked about cut size and coordinates calculation, but I don’t know what is there to explain. If you suck in math, than just copy paste it and live your miserable life :)

function create_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate cut size and coordinates
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $cut_width  = $original_width;
          $cut_height = ( $original_width * $thumb_height ) / $thumb_width;

          $cut_x = 0;
          $cut_y = 0;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $cut_width  = ( $original_height * $thumb_width ) / $thumb_height;
          $cut_height = $original_height;

          $cut_x = ( $original_width - $cut_width ) / 2;
          $cut_y = 0;

      }
      else
      {

          $cut_width  = $original_width;
          $cut_height = $original_height;

          $cut_x = 0;
          $cut_y = 0;

      }

      // Create final image layout
      $final_image = imagecreatetruecolor( $thumb_width, $thumb_height );

      // Is gif
      if( $pathinfo['extension'] == 'gif' )
      {
      	$source_image = imagecreatefromgif( $source_path );
      }
      // Is png
      elseif( $pathinfo['extension'] == 'png' )
      {
      	$source_image = imagecreatefrompng( $source_path );
      }
      // Is jpg, jpeg
      else
      {
      	$source_image = imagecreatefromjpeg( $source_path );
      }

      // Cut, resize source, and create final image
      imagecopyresampled( $final_image, $source_image, 0, 0, $cut_x, $cut_y, $thumb_width, $thumb_height, $cut_width, $cut_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

As you may notice, this function will always create a .jpg image. You can easily modify that to generate the same image type as source, but .jpg is simply the best choice for thumbnail, and it is not creating such mess on ftp as various image types. (If you are uploading animated gif, the first frame will be your thumbnail)

1.) Generate thumbnail by original image resolution ratio

This function will generate a thumbnail, which will fit into max thumbnail width and max height set by you, but also it will preserve the resolution image ratio of original, so it will be not deformed. Advantages and disadvantages of this method are exact opposite of previous one. Whole image is preserve in minified version, but on website, it could looks awful. Depends on how and where you are planning to use these thumbnails.
For better understanding, click on the image below.

Definition and parameters are exactly same, just function is called create_ratio_thumb. Differences are highlighted.

function create_ratio_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate final thumbnail resolution
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $final_width  = round( ( $thumb_height * $original_width) / $original_height );
          $final_height = $thumb_height;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $final_width  = $thumb_width;
          $final_height = round( ( $thumb_width * $original_height ) / $original_width );

      }
      else
      {

          $final_width  = $thumb_width;
          $final_height = $thumb_height;

      }

      // Create final image layout
  		$final_image = imagecreatetruecolor( $final_width, $final_height );

  		// Is gif
  		if( $pathinfo['extension'] == 'gif' )
  		{
  			$source_image = imagecreatefromgif( $source_path );
  		}
  		// Is png
  		elseif( $pathinfo['extension'] == 'png' )
  		{
  			$source_image = imagecreatefrompng( $source_path );
  		}
  		// Is jpg, jpeg
  		else
  		{
  			$source_image = imagecreatefromjpeg( $source_path );
  		}

  		// Resize source, and create the final image
  		imagecopyresampled( $final_image, $source_image, 0, 0, 0, 0, $final_width, $final_height, $original_width, $original_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

And that would be our tutorial on creating thumbnails :) Check out the demo, where you can try to generate thumbnail from your own image, or download the tutorial files. (and don’t forget to set chmod 0777 to destination folder)

Demo presentation

355x

Tutorial files

10.30KB 214x

Demo presentation

474x

Tutorial files

24.93KB 247x

First, we need to decide, how the animation will be triggered, and by what object. I’ve choose the solution of creating your own attributes (yeah, now you can’t masturbate over 100% W3C validation result you hypocritical bastard ;)), so the triggering object can be almost any tag. Animation will start after click on any object with my custom attribute “toggle”, and animated will be object with id equals toggle value. The whole HTML will look like this:

<a href="#" toggle="myObject">Click me</a>

<div id="myObject">
content ...
</div>

Easy, huh? And as I already wrote, you can add this custom attribute to any object, like this:

<a href="#" toggle="myObject">Click me</a>
<div toggle="myObject">Click me</div>
<span toggle="myObject">Click me</span>
<h1 toggle="myObject">Click me</h1>

<div id="myObject">
content ...
</div>

All objects with attribute “toggle”, which is addressing to triggered object ID, are live buttons now.

“But, what if I need to show one object, but close few others with some group, or something?”

Nothing can be easier. We can add to targeted object another custom attribute called “group”, and give it the name of group as a value, so all the objects with this group will slide up, when another object is sliding down. Here is the HTML:

<a href="#" toggle="bread1">I want some bread</a>

<div id="bread" group="breakfast">
content ...
</div>

<a href="#" toggle="bread2">What about milk?</a>

<div id="milk" group="breakfast">
content ...
</div>

So, now, when we know how we want this to work, we can jump to creating our jQuery snippet.
We need to trigger the click() function, when any object with the attribute “toggle” is clicked.

$("[toggle]").click( function() {

});

Now, we need to define some variables to work with. Read the descriptions next to them.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle"); // get the ID of targeted object from "toggle" attribute value
  var targetObj = $("[id="+targetObjId+"]"); // find and target the needed object into variable
  var targetObjGroup = $(targetObj).attr("group"); // check, if tehre is any group reference on targeted object

});

We have our variables, so lets do some magic and finish the snippet. Again, read the comments in code.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup ) // if there is some reference to group, run this
  {
      $("[group="+targetObjGroup+"]").not(targetObj).slideUp(); // slide up (hide) all objects with refered group, but not our targetObj
      $(targetObj).slideDown(); // slide down (animated show function) our targetObj
  }
  else // if  there is no reference for group, run this
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).slideDown(); // if our targetObj is hidden, slide him down
      else $(targetObj).slideUp(); // in other case, slide him up
  }

  return false; // in case that triggering object is an <a> tag, we don't want to href="" got executed by browser

});

And thats it. This 19 lines of code can simply replace the whole Animated Collapsible DIV plugin. Interesting huh?

But this is not over yet :) In case, that you want to use this snippet as a tabs switcher, you have to do some changes, but you want to leave this snipped like it is, so simply copy paste it, and change the attribute to “showtab”. Here is the new snipped, with highlighted lines and explanations.

$("[showtab]").click( function() { // changed attribute

  var targetObjId = $(this).attr("showtab"); // changed attribute
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  {
      $("[group="+targetObjGroup+"]").not(targetObj).hide(); // in case of hiding tab, we don want to animate sliding, so it wouldn't mess with height of surrounding elements
      $(targetObj).fadeIn(); // fadeIn() animation is way better in tabs switching
  }
  else
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).fadeIn(); // in case, that there is only one tab, just toggle it
      else $(targetObj).fadeOut();
  }

  return false;

});

If you need to change style of triggering button after click, just create a css class called “active” with needed changes, and toggle this class to button after if().

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  { ... }
  else
  { ... }

  $(this).toggleclass('active'); // <- thats what I'm talking about

  return false;

});

Or add this class with addclass(), and remove with removeclass() whenever in code you need.

I hope, that this tutorial will be useful for someone, and remember: Try to create some functions & features yourself before finding the solution among plugins. That way, you will gain more experience, and know-hows.

As bonus, here are 2 simple snippets for “show” and “hide” attributes, for better understanding.

$("[show]").click( function() {

  var targetObjId = $(this).attr("show");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideDown();

});

$("[hide]").click( function() {

  var targetObjId = $(this).attr("hide");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideUp();

});

If you have any questions, do not hesitate to ask. Comments are always welcome.

Demo presentation

474x

Tutorial files

24.93KB 247x