Dreambox

Features

Unlike the others image boxes the dreambox does not enlarge a container of the images but lets the image to be moved and zoomed within the same boudaries.

Besides zooming and moving the plugin supports fullscreen mode of the modern browsers.

Disables right clicking and saving the image.

Eliminates IMG tag from the HTML code.

Use

Include the plugin cond into the page header:

<script src="https://rawgithub.com/dsame/dreambox/master/src/js/dreambox.js"></script>

and apply the paramaters to some HTML blocks containing the references to the images:

<script>
jQuery(function(){
$('.dreambox').dreambox({
	bgColor:'#bb0', // Alternative to background color CSS property of the container
	useBackground:false, // Will be IMG tag used or background-image CSS property to render the image
	cpShowDuration:300, // a duration of the panel fading in
	cpHideDuration:2000, // a duration of the panel fading out
	cpHideTimeout:2000, // an idle timeout the panel will fade out after
	zoomingSpeed:10 // Delta of the zooming in the percent of the current size
})
})
</script>

finally put the container with the image somewhere in your code:

<div class="dreambox" style="width:690px;height:400px"><img src="images/3683351134_b58357fac1_o.jpg"></img></div>

Pay attention you must have both a container for the image to set the boundaries of the visible area and the image itself.

Roadmap

• Loupe tool
• Embedding 3rd party photohosting images
• Gallery slider
• Lightbox
• Image loading progressbar