<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>
