Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom feature #693

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
+111 −21
Open

Zoom feature #693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3ee1603
zoom: added zoomin & zoomout buttons
alexeiTruhin Jan 15, 2015
9b89a03
zoom: updated trace.txt
alexeiTruhin Jan 15, 2015
e439c3d
zoom: added zoomin and zoomout behaviours
alexeiTruhin Jan 15, 2015
990412a
Merged with master
alexeiTruhin Jan 17, 2015
ae0b02a
Cobined funtctions zommin and zoomout into one function zoom
alexeiTruhin Jan 17, 2015
a0b3c37
Optimized and corrected function "zoom"
alexeiTruhin Jan 17, 2015
b882db6
Added draggable behavior for picture
alexeiTruhin Jan 17, 2015
04ab555
Deleted trace.txt
alexeiTruhin Jan 17, 2015
5c3615e
zoom: updated colorbox.css and controls.png for example1
alexeiTruhin Jan 26, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions example1/colorbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow, #cboxZoomin, #cboxZoomout{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -151px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -180px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -151px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -180px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
Expand All @@ -40,8 +40,8 @@
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose, #cboxZoomin, #cboxZoomout {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

Expand All @@ -51,7 +51,10 @@
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
#cboxZoomin{position:absolute; bottom:0; right: 59px; background:url(images/controls.png) no-repeat -125px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxZoomin:hover{background-position:-125px -25px}
#cboxZoomout{position:absolute; bottom:0; right: 32px; background:url(images/controls.png) no-repeat -100px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxZoomout:hover{background-position:-100px -25px}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
Expand Down
Binary file modified example1/images/controls.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions example1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group1").colorbox({rel:'group1', zoom: true});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
Expand All @@ -33,9 +33,9 @@

$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
Expand All @@ -48,32 +48,32 @@ <h2>Elastic Transition</h2>
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Fade Transition</h2>
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Slideshow</h2>
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Other Content Types</h2>
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<h2>Demonstration of using callbacks</h2>
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>


<h2>Retina Images</h2>
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
Expand All @@ -85,7 +85,7 @@ <h2>Retina Images</h2>
<p><strong>This content comes from a hidden element on this page.</strong></p>
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
Expand Down
91 changes: 89 additions & 2 deletions jquery.colorbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
fixed: false,
data: undefined,
closeButton: true,
zoom: false,
fastIframe: true,
open: false,
reposition: true,
Expand All @@ -64,6 +65,8 @@
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",
zoomin: "+",
zoomout: "-",

// accessbility
returnFocus: true,
Expand Down Expand Up @@ -121,6 +124,8 @@
$next,
$prev,
$close,
$zoomin,
$zoomout,
$groupControls,
$events = $('<a/>'), // $({}) would be prefered, but there is an issue with jQuery 1.4.2

Expand Down Expand Up @@ -427,6 +432,15 @@
$close.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
}

if (settings.get('zoom')) {
$zoomin.html(settings.get('zoomin')).appendTo($content);
$zoomout.html(settings.get('zoomout')).appendTo($content);
} else {
$zoomin.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
$zoomout.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
}


load();
}
}
Expand Down Expand Up @@ -456,6 +470,8 @@
);

$close = $('<button type="button"/>').attr({id:prefix+'Close'});
$zoomin = $('<button type="button"/>').attr({id:prefix+'Zoomin'});
$zoomout = $('<button type="button"/>').attr({id:prefix+'Zoomout'});

$wrap.append( // The 3x3 Grid that makes up Colorbox
$tag(div).append(
Expand Down Expand Up @@ -509,6 +525,12 @@
$close.click(function () {
publicMethod.close();
});
$zoomin.click(function () {
publicMethod.zoom('in');
});
$zoomout.click(function () {
publicMethod.zoom('out');
});
$overlay.click(function () {
if (settings.get('overlayClose')) {
publicMethod.close();
Expand Down Expand Up @@ -766,7 +788,10 @@

$loaded.hide()
.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
.css({width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden'})
.css({
width: getWidth(),
overflow: settings.get('scrolling') && !settings.get('zoom') ? 'auto' : 'hidden'
})
.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
.prependTo($content);

Expand All @@ -776,6 +801,48 @@

$(photo).css({'float': 'none'});

if (settings.get('zoom')) {
$(photo).css({
'height': 'auto',
'position': 'relative',
'left': 0,
'top': 0,
'display': 'inline'
});

// Draggable variables
var drag = false,
xPos0 = 0,
yPos0 = 0;

// Draggable event on MouseDown
$loaded.mousedown(function(e){
drag = true;
xPos0 = e.pageX;
yPos0 = e.pageY;
});

// Draggable event on MouseUp
$(document).mouseup(function(e){
drag = false;
});

// Draggable event on MouseMove
$loaded.mousemove(function(e){
if (!drag) return false;
e.preventDefault();

var left = e.pageX - xPos0,
top = e.pageY - yPos0;

xPos0 = e.pageX;
yPos0 = e.pageY;

$(photo).css('left', parseInt($(photo).css('left')) + left + 'px');
$(photo).css('top', parseInt($(photo).css('top')) + top + 'px');
});
}

setClass(settings.get('className'));

callback = function () {
Expand Down Expand Up @@ -994,7 +1061,7 @@
photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
}

if ($related[1] && (settings.get('loop') || $related[index + 1])) {
if ($related[1] && (settings.get('loop') || $related[index + 1]) && !settings.get('zoom')) {
photo.style.cursor = 'pointer';
photo.onclick = function () {
publicMethod.next();
Expand Down Expand Up @@ -1059,6 +1126,26 @@
}
};

// Zoom picture 'in' or 'out'
publicMethod.zoom = function (type) {
var w = $loaded.width();
h = $loaded.height();

if (type === 'in') {
$(photo).css({
'width': $(photo).width() * 2,
'left': (parseInt($(photo).css('left')) * (-2) + w / 2) * (-1),
'top': (parseInt($(photo).css('top')) * (-2) + h / 2) * (-1)
});
} else if (type === 'out') {
$(photo).css({
'width': $(photo).width() / 2,
'left': (parseInt($(photo).css('left')) / (-2) - w / 4) * (-1),
'top': (parseInt($(photo).css('top')) / (-2) - h / 4 ) * (-1)
});
}
};

// Removes changes Colorbox made to the document, but does not remove the plugin.
publicMethod.remove = function () {
if (!$box) { return; }
Expand Down