options: {
steps: 6, // steps of zoom
- max: 300, // max zoom in percent
+ max: -1, // max zoom in percent
plus_button: undefined,
- minus_button: undefined
+ minus_button: undefined,
+ height: 500, // height to scale to initially
},
+
_create: function() {
var self = this;
+ /* Calibrate */
self._zoom = 0;
+
+ // the initial thumbnailed picture
+
+
+ var img = self.element.find('img.initial').get(0);
+
self.initial_size = [
- self.element.width(),
- self.element.height()
+ img.naturalWidth,
+ img.naturalHeight
];
+
+ self.element.width(self.initial_size[0]);
+ self.element.height(self.initial_size[1]);
+
self.initial_position = self.element.offset();
+ var original = self.element.find('img.original').get(0);
+ self._original = false;
+ self.original_loeaded = undefined; // callback
+ self._original_loaded = false;
+
+ self.spinner = $("#spinner").progressSpin();
+
+ $(original).load(function() {
+ self._original_loaded = true;
+ self.spinner.stop();
+ var cb = self.original_loaded;
+ self.original_loaded = undefined;
+ if (cb)
+ cb()
+ });
+
+ if (self.options.max <= 0) {
+ self.options.max = original.naturalWidth
+ * 100 / self.initial_size[0];
+ }
+
self.element.css({
'margin': 0,
- 'position': 'absolute',
});
+
self.element.offset(self.initial_position);
+ self.element.draggable({containment:"parent"});
if (self.options.plus_button)
self.options.plus_button.click(
self.options.minus_button.click(
function(ev) { self.zoom(-1); });
- function contain(event, ui) {
- var fix = self.allowedPosition(ui.position);
- console.log("fix: ", fix);
- if (fix !== undefined) {
- return false;
- };
- };
- self.element.draggable({drag: contain});
-
+ self.options.areas_links.hover(function() {
+ $this = $(this);
+ var coords = $this.data("coords");
+ this._picture_mark = self.createMark({
+ label: $this.text(),
+ coords: coords,
+ });
+ }, function() {
+ $(this._picture_mark).remove();
+ this._picture_mark = undefined;
+ });
return self;
},
+ natural_size: function() {
+ var img = this.element.find('img').get(0);
+ return [ img.naturalWidth, img.naturalHeight ]
+ },
+
+ currentZoom: function() { return this._zoom; },
+
+ initOriginal: function() {
+ var self = this;
+ function subst_original() {
+ self.element.find("img.initial").remove();
+ self.element.find("img.loading").removeClass("loading");
+ self._original = true;
+ }
+ if (!this._original) {
+ if (this._original_loaded) {
+ return subst_original();
+ } else {
+ self.original_loaded = subst_original;
+ self.spinner.start();
+ }
+ }
+
+ },
+
zoom: function(steps) {
+ this.initOriginal();
var t = this._zoom + steps;
return this.zoomTo(t);
},
var new_height = ratio * this.initial_size[1];
var target = {
'width': new_width,
- 'left': this.initial_position.left - (new_width - this.initial_size[0])/2,
- 'top': this.initial_position.top - (new_height - this.initial_size[1])/2,
+ 'left': Math.max(0,
+ this.initial_position.left
+ - (new_width - this.initial_size[0])/2),
+ 'top': Math.max(0,
+ this.initial_position.top
+ - (new_height - this.initial_size[1])/2),
};
+
this._zoom = level;
this.element.animate(target, 200); // default duration=400
},
return undefined;
},
+
+ // mark
+ // {
+ // label: "...",
+ // coords: [x, y, w, h]
+ // }
+ createMark: function(mark) {
+ var $mark = $('<div class="mark"><div class="label">' +
+ mark.label + '</div></div>');
+ var ratio = this.zoomForStep(this.currentZoom()) *
+ this.initial_size[0] / (100 * this.natural_size()[0]);
+ var scale = function (v) {
+ return v * ratio;
+ }
+ if (mark.coords[1][0] < 0 || mark.coords[1][1] < 0) { // whole
+ var s = self.natural_size();
+ if (mark.coords[1][0] < 0) mark.coords[1][0] = s[0];
+ if (mark.coords[1][1] < 0) mark.coords[1][1] = s[1];
+ }
+
+ var coords = [[scale(mark.coords[0][0]), scale(mark.coords[0][1])],
+ [scale(mark.coords[1][0]), scale(mark.coords[1][1])]];
+ this.element.append($mark);
+ $mark.width(coords[1][0] - coords[0][0]);
+ $mark.height(coords[1][1] - coords[0][1]);
+ $mark.css({left: coords[0][0], top: coords[0][1]});
+ return $mark.get(0);
+ },
});
}(jQuery));
$(document).ready(function(){
- $("img.canvas").pictureviewer({
+ $(".picture-wrap").pictureviewer({
plus_button: $(".toolbar .button.plus"),
- minus_button: $(".toolbar .button.minus")
+ minus_button: $(".toolbar .button.minus"),
+ areas_links: $("#picture-objects a, #picture-themes a"),
+ });
+
+ $.highlightFade.defaults.speed = 3000;
+
+ $('.toolbar a.dropdown').each(function() {
+ $t = $(this);
+ $($t.attr('href')).hide().insertAfter(this);
});
+
+ $('.toolbar a.dropdown').toggle(function() {
+ $(this).addClass('selected');
+ $($(this).attr('href')).slideDown('fast');
+ }, function() {
+ $(this).removeClass('selected');
+ $($(this).attr('href')).slideUp('fast');
+ });
+
+
});
fnp / wolnelektury.git / blobdiff