Garralab
  • Home
  • Chrome
    • AlphaFinder
    • Click2Clip
  • jQuery
    • NailThumb
    • HiddenPosition
  • Other projects
    • AtomicBlogger
  • Articles

jQuery NailThumb server side resize demo

We found out of a product that crop/resize images server side (and much more) and we decided to integrate with it. imageresizer will let you modify your images with a lot of usefull functions, that usually you'd have only in image editing software.

It works on Windows servers, so if you're using one you should definitely consider it. For resize purpose our two methods overlap, but using both you'll be able to serve images of small dimension/resolution and still decide thumbnail dimension via css.

For more details on how to set imageresizer params see its section in the options page.

imageresizer lets you resize, crop, rotate, watermark, and modify images server side, with a simple API. view code

Rotate:
Flip:
Effects:
Contrast:
Brightness:
Saturation:
Remove noise:
Sharpen:
Oil painting:
Posterize:
×

ShadowBox code


            <script type="text/javascript" src="path/to/jquery.js"></script>
            <script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
            <script type="text/javascript" src="path/to/shadowbox.js"></script>
            <link href="path/to/shadowbox.css" type="text/css" rel="stylesheet" />
            <style type="text/css" media="screen">
                .square-thumb {
                    width: 200px;
                    height: 200px;
                    background-image: url("path/to/loadingplaceholder");
                    background-position: center center;
                    background-repeat: no-repeat;
                }
            </style>
            ...
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            <a class="square-thumb" rel="shadowbox[gallery]" title="Image Title" href="path/to/full/image"></a>
            ...
	    <div id="" class=""><strong>Rotate:</strong></div>
            <div id="" class="">
                <button class="btn rotate-cw-45"><i class="icon-added icon-rotate-cw"></i> 45°</button>
                <button class="btn rotate-cw-90"><i class="icon-added icon-rotate-cw"></i> 90°</button>
            </div>
            <div id="" class="">
                <button class="btn rotate-cu-45"><i class="icon-added icon-rotate-cu"></i> 45°</button>
                <button class="btn rotate-cu-90"><i class="icon-added icon-rotate-cu"></i> 90°</button>
            </div>
            <div id="" class="spaced"><strong>Flip:</strong></div>
            <div id="" class="">
                <button class="btn flip-x" data-toggle="button"><i class="icon-added icon-flip-x"></i> x</button>
                <button class="btn flip-y" data-toggle="button"><i class="icon-added icon-flip-y"></i> y</button>
            </div>
            <div id="" class="spaced"><strong>Effects:</strong></div>
            <div id="" class="">
                <button class="btn toggle-effect {effect:'s.grayscale'}" data-toggle="button">Black & White</button>
                <button class="btn toggle-effect {effect:'s.sepia'}" data-toggle="button">Sepia</button>
                <button class="btn toggle-effect {effect:'s.invert'}" data-toggle="button">Inverse</button>
                <button class="btn toggle-effect {effect:'s.equalize'}" data-toggle="button">Equalize</button>
            </div>
            <div id="" class="spaced"><strong>Contrast:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect">
                    <button class="btn {effect:'s.contrast',scale:-1}">-1</button>
                    <button class="btn {effect:'s.contrast',scale:-0.5}">-0.5</button>
                    <button class="btn active {effect:'s.contrast',scale:0}">0</button>
                    <button class="btn {effect:'s.contrast',scale:0.5}">0.5</button>
                    <button class="btn {effect:'s.contrast',scale:1}">1</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Brightness:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect">
                    <button class="btn {effect:'s.brightness',scale:-1}">-1</button>
                    <button class="btn {effect:'s.brightness',scale:-0.5}">-0.5</button>
                    <button class="btn active {effect:'s.brightness',scale:0}">0</button>
                    <button class="btn {effect:'s.brightness',scale:0.5}">0.5</button>
                    <button class="btn {effect:'s.brightness',scale:1}">1</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Saturation:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect">
                    <button class="btn {effect:'s.saturation',scale:-1}">-1</button>
                    <button class="btn {effect:'s.saturation',scale:-0.5}">-0.5</button>
                    <button class="btn active {effect:'s.saturation',scale:0}">0</button>
                    <button class="btn {effect:'s.saturation',scale:0.5}">0.5</button>
                    <button class="btn {effect:'s.saturation',scale:1}">1</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Remove noise:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect-radius">
                    <button class="btn active {effect:'a.removenoise',scale:0}">0</button>
                    <button class="btn {effect:'a.removenoise',scale:10}">10</button>
                    <button class="btn {effect:'a.removenoise',scale:40}">40</button>
                    <button class="btn {effect:'a.removenoise',scale:70}">70</button>
                    <button class="btn {effect:'a.removenoise',scale:100}">100</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Sharpen:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect-radius">
                    <button class="btn active {effect:'a.sharpen',scale:0}">0</button>
                    <button class="btn {effect:'a.sharpen',scale:1}">1</button>
                    <button class="btn {effect:'a.sharpen',scale:4}">4</button>
                    <button class="btn {effect:'a.sharpen',scale:7}">7</button>
                    <button class="btn {effect:'a.sharpen',scale:10}">10</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Oil painting:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect-radius">
                    <button class="btn active {effect:'a.oilpainting',scale:0}">0</button>
                    <button class="btn {effect:'a.oilpainting',scale:2}">2</button>
                    <button class="btn {effect:'a.oilpainting',scale:8}">8</button>
                    <button class="btn {effect:'a.oilpainting',scale:14}">14</button>
                    <button class="btn {effect:'a.oilpainting',scale:20}">20</button>
                </div>
            </div>
            <div id="" class="spaced"><strong>Posterize:</strong></div>
            <div id="" class="">
                <div data-toggle="buttons-radio" class="btn-group scale-effect-radius">
                    <button class="btn active {effect:'a.posterize',scale:0}">0</button>
                    <button class="btn {effect:'a.posterize',scale:10}">10</button>
                    <button class="btn {effect:'a.posterize',scale:40}">40</button>
                    <button class="btn {effect:'a.posterize',scale:70}">70</button>
                    <button class="btn {effect:'a.posterize',scale:100}">100</button>
                </div>
            </div>
            ...
            <script type="text/javascript">
                var options = {
                    imageCustomFinder: function(el){
                        var image = $('<img />').attr('src',el.attr('href').replace('/full/','/small/')).css('display','none');
                        image.attr('alt',el.attr('title'));
                        el.append(image);
                        return image;
                    },
                    serverSideParams:{memcache:true,maxwidth:1660,maxheight:1660,cache:'no',scache:'mem'},
                    titleAttr:'alt'
                };
                jQuery(document).ready(function() {
                    jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    Shadowbox.init();
                    options.animation=null;
                    options.onStart=function(){jQuery('#serverside-gallery .demo-controls').showLoading();};
                    options.onFinish=function(){jQuery('#serverside-gallery .demo-controls').hideLoading();};

                    jQuery('.tooltipme').tooltip();

                    jQuery('.rotate-cw-45,.rotate-cw-90,.rotate-cu-45,.rotate-cu-90').click(function(){
                        var rotate = 0;
                        if (options.serverSideParams.rotate) rotate = options.serverSideParams.rotate;
                        if (jQuery(this).is('.rotate-cw-45')) rotate += 45;
                        if (jQuery(this).is('.rotate-cw-90')) rotate += 90;
                        if (jQuery(this).is('.rotate-cu-45')) rotate -= 45;
                        if (jQuery(this).is('.rotate-cu-90')) rotate -= 90;
                        options.serverSideParams.rotate = rotate;
                        jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    });
                    jQuery('.flip-x,.flip-y').click(function(){
                        var flip = "";
                        if (options.serverSideParams.flip) flip = options.serverSideParams.flip;
                        if (jQuery(this).is('.flip-x')) {
                            if (flip.indexOf('x')>=0) flip = flip.replace('x','');
                            else if (flip.indexOf('y')>=0) flip = 'xy';
                            else flip = 'x';
                        }
                        if (jQuery(this).is('.flip-y')) {
                            if (flip.indexOf('y')>=0) flip = flip.replace('y','');
                            else flip += 'y';
                        }
                        if (flip == "") options.serverSideParams.flip = null;
                        else options.serverSideParams.flip = flip;
                        jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    });
                    jQuery('.toggle-effect').click(function(){
                        var effect = jQuery(this).metadata().effect;
                        var val = true;
                        if (options.serverSideParams[effect]) val = false;
                        options.serverSideParams[effect] = val;
                        jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    });
                    jQuery('.scale-effect button').click(function(){
                        var effect = jQuery(this).metadata().effect;
                        var val = jQuery(this).metadata().scale;
                        options.serverSideParams[effect] = val;
                        jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    });
                    jQuery('.scale-effect-radius button').click(function(){
                        var effect = jQuery(this).metadata().effect;
                        var val = jQuery(this).metadata().scale;
                        options.serverSideParams[effect] = val;
                        options.serverSideParams['a.radiusunits'] = 1000;
                        jQuery('#serverside-gallery .square-thumb').nailthumb(options);
                    });
                });
            </script>
                
Close
Tweet

©2012 Garralab - Contact us - Site licensed under CC BY 3.0 - Mobile and Web Analytics