I want to apply magnifying glass and lightbox both on an image so when a user hovers on an image the glass effect will appear and when he clicks the lightbox will appear. But in my case the lightbox stopped working when I actived the magnifying glass. So when I remove the glass CSS lightbox worked normally.
/*!
* Lightbox v2.10.0
* by Lokesh Dhakar
*
* More info:
* http://lokeshdhakar.com/projects/lightbox2/
*
* Copyright 2007, 2018 Lokesh Dhakar
* Released under the MIT license
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
*
* #preserve
*/
! function(a, b) {
"function" == typeof define && define.amd ? define(["jquery"], b) : "object" == typeof exports ? module.exports = b(require("jquery")) : a.lightbox = b(a.jQuery)
}(this, function(a) {
function b(b) {
this.album = [], this.currentImageIndex = void 0, this.init(), this.options = a.extend({}, this.constructor.defaults), this.option(b)
}
return b.defaults = {
albumLabel: "Image %1 of %2",
alwaysShowNavOnTouchDevices: !1,
fadeDuration: 600,
fitImagesInViewport: !0,
imageFadeDuration: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: !0,
wrapAround: !1,
disableScrolling: !1,
sanitizeTitle: !1
}, b.prototype.option = function(b) {
a.extend(this.options, b)
}, b.prototype.imageCountLabel = function(a, b) {
return this.options.albumLabel.replace(/%1/g, a).replace(/%2/g, b)
}, b.prototype.init = function() {
var b = this;
a(document).ready(function() {
b.enable(), b.build()
})
}, b.prototype.enable = function() {
var b = this;
a("body").on("click", "a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]", function(c) {
return b.start(a(c.currentTarget)), !1
})
}, b.prototype.build = function() {
if (!(a("#lightbox").length > 0)) {
var b = this;
a('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo(a("body")), this.$lightbox = a("#lightbox"), this.$overlay = a("#lightboxOverlay"), this.$outerContainer = this.$lightbox.find(".lb-outerContainer"), this.$container = this.$lightbox.find(".lb-container"), this.$image = this.$lightbox.find(".lb-image"), this.$nav = this.$lightbox.find(".lb-nav"), this.containerPadding = {
top: parseInt(this.$container.css("padding-top"), 10),
right: parseInt(this.$container.css("padding-right"), 10),
bottom: parseInt(this.$container.css("padding-bottom"), 10),
left: parseInt(this.$container.css("padding-left"), 10)
}, this.imageBorderWidth = {
top: parseInt(this.$image.css("border-top-width"), 10),
right: parseInt(this.$image.css("border-right-width"), 10),
bottom: parseInt(this.$image.css("border-bottom-width"), 10),
left: parseInt(this.$image.css("border-left-width"), 10)
}, this.$overlay.hide().on("click", function() {
return b.end(), !1
}), this.$lightbox.hide().on("click", function(c) {
return "lightbox" === a(c.target).attr("id") && b.end(), !1
}), this.$outerContainer.on("click", function(c) {
return "lightbox" === a(c.target).attr("id") && b.end(), !1
}), this.$lightbox.find(".lb-prev").on("click", function() {
return 0 === b.currentImageIndex ? b.changeImage(b.album.length - 1) : b.changeImage(b.currentImageIndex - 1), !1
}), this.$lightbox.find(".lb-next").on("click", function() {
return b.currentImageIndex === b.album.length - 1 ? b.changeImage(0) : b.changeImage(b.currentImageIndex + 1), !1
}), this.$nav.on("mousedown", function(a) {
3 === a.which && (b.$nav.css("pointer-events", "none"), b.$lightbox.one("contextmenu", function() {
setTimeout(function() {
this.$nav.css("pointer-events", "auto")
}.bind(b), 0)
}))
}), this.$lightbox.find(".lb-loader, .lb-close").on("click", function() {
return b.end(), !1
})
}
}, b.prototype.start = function(b) {
function c(a) {
d.album.push({
alt: a.attr("data-alt"),
link: a.attr("href"),
title: a.attr("data-title") || a.attr("title")
})
}
var d = this,
e = a(window);
e.on("resize", a.proxy(this.sizeOverlay, this)), a("select, object, embed").css({
visibility: "hidden"
}), this.sizeOverlay(), this.album = [];
var f, g = 0,
h = b.attr("data-lightbox");
if (h) {
f = a(b.prop("tagName") + '[data-lightbox="' + h + '"]');
for (var i = 0; i < f.length; i = ++i) c(a(f[i])), f[i] === b[0] && (g = i)
} else if ("lightbox" === b.attr("rel")) c(b);
else {
f = a(b.prop("tagName") + '[rel="' + b.attr("rel") + '"]');
for (var j = 0; j < f.length; j = ++j) c(a(f[j])), f[j] === b[0] && (g = j)
}
var k = e.scrollTop() + this.options.positionFromTop,
l = e.scrollLeft();
this.$lightbox.css({
top: k + "px",
left: l + "px"
}).fadeIn(this.options.fadeDuration), this.options.disableScrolling && a("html").addClass("lb-disable-scrolling"), this.changeImage(g)
}, b.prototype.changeImage = function(b) {
var c = this;
this.disableKeyboardNav();
var d = this.$lightbox.find(".lb-image");
this.$overlay.fadeIn(this.options.fadeDuration), a(".lb-loader").fadeIn("slow"), this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(), this.$outerContainer.addClass("animating");
var e = new Image;
e.onload = function() {
var f, g, h, i, j, k;
d.attr({
alt: c.album[b].alt,
src: c.album[b].link
}), a(e), d.width(e.width), d.height(e.height), c.options.fitImagesInViewport && (k = a(window).width(), j = a(window).height(), i = k - c.containerPadding.left - c.containerPadding.right - c.imageBorderWidth.left - c.imageBorderWidth.right - 20, h = j - c.containerPadding.top - c.containerPadding.bottom - c.imageBorderWidth.top - c.imageBorderWidth.bottom - 120, c.options.maxWidth && c.options.maxWidth < i && (i = c.options.maxWidth), c.options.maxHeight && c.options.maxHeight < i && (h = c.options.maxHeight), (e.width > i || e.height > h) && (e.width / i > e.height / h ? (g = i, f = parseInt(e.height / (e.width / g), 10), d.width(g), d.height(f)) : (f = h, g = parseInt(e.width / (e.height / f), 10), d.width(g), d.height(f)))), c.sizeContainer(d.width(), d.height())
}, e.src = this.album[b].link, this.currentImageIndex = b
}, b.prototype.sizeOverlay = function() {
this.$overlay.width(a(document).width()).height(a(document).height())
}, b.prototype.sizeContainer = function(a, b) {
function c() {
d.$lightbox.find(".lb-dataContainer").width(g), d.$lightbox.find(".lb-prevLink").height(h), d.$lightbox.find(".lb-nextLink").height(h), d.showImage()
}
var d = this,
e = this.$outerContainer.outerWidth(),
f = this.$outerContainer.outerHeight(),
g = a + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right,
h = b + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
e !== g || f !== h ? this.$outerContainer.animate({
width: g,
height: h
}, this.options.resizeDuration, "swing", function() {
c()
}) : c()
}, b.prototype.showImage = function() {
this.$lightbox.find(".lb-loader").stop(!0).hide(), this.$lightbox.find(".lb-image").fadeIn(this.options.imageFadeDuration), this.updateNav(), this.updateDetails(), this.preloadNeighboringImages(), this.enableKeyboardNav()
}, b.prototype.updateNav = function() {
var a = !1;
try {
document.createEvent("TouchEvent"), a = !!this.options.alwaysShowNavOnTouchDevices
} catch (a) {}
this.$lightbox.find(".lb-nav").show(), this.album.length > 1 && (this.options.wrapAround ? (a && this.$lightbox.find(".lb-prev, .lb-next").css("opacity", "1"), this.$lightbox.find(".lb-prev, .lb-next").show()) : (this.currentImageIndex > 0 && (this.$lightbox.find(".lb-prev").show(), a && this.$lightbox.find(".lb-prev").css("opacity", "1")), this.currentImageIndex < this.album.length - 1 && (this.$lightbox.find(".lb-next").show(), a && this.$lightbox.find(".lb-next").css("opacity", "1"))))
}, b.prototype.updateDetails = function() {
var b = this;
if (void 0 !== this.album[this.currentImageIndex].title && "" !== this.album[this.currentImageIndex].title) {
var c = this.$lightbox.find(".lb-caption");
this.options.sanitizeTitle ? c.text(this.album[this.currentImageIndex].title) : c.html(this.album[this.currentImageIndex].title), c.fadeIn("fast").find("a").on("click", function(b) {
void 0 !== a(this).attr("target") ? window.open(a(this).attr("href"), a(this).attr("target")) : location.href = a(this).attr("href")
})
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
var d = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
this.$lightbox.find(".lb-number").text(d).fadeIn("fast")
} else this.$lightbox.find(".lb-number").hide();
this.$outerContainer.removeClass("animating"), this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration, function() {
return b.sizeOverlay()
})
}, b.prototype.preloadNeighboringImages = function() {
if (this.album.length > this.currentImageIndex + 1) {
(new Image).src = this.album[this.currentImageIndex + 1].link
}
if (this.currentImageIndex > 0) {
(new Image).src = this.album[this.currentImageIndex - 1].link
}
}, b.prototype.enableKeyboardNav = function() {
a(document).on("keyup.keyboard", a.proxy(this.keyboardAction, this))
}, b.prototype.disableKeyboardNav = function() {
a(document).off(".keyboard")
}, b.prototype.keyboardAction = function(a) {
var b = a.keyCode,
c = String.fromCharCode(b).toLowerCase();
27 === b || c.match(/x|o|c/) ? this.end() : "p" === c || 37 === b ? 0 !== this.currentImageIndex ? this.changeImage(this.currentImageIndex - 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(this.album.length - 1) : "n" !== c && 39 !== b || (this.currentImageIndex !== this.album.length - 1 ? this.changeImage(this.currentImageIndex + 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(0))
}, b.prototype.end = function() {
this.disableKeyboardNav(), a(window).off("resize", this.sizeOverlay), this.$lightbox.fadeOut(this.options.fadeDuration), this.$overlay.fadeOut(this.options.fadeDuration), a("select, object, embed").css({
visibility: "visible"
}), this.options.disableScrolling && a("html").removeClass("lb-disable-scrolling")
}, new b
});
//# sourceMappingURL=lightbox.min.map
//magnyfing glass
$(function() {
var native_width = 0;
var native_height = 0;
var mouse = {
x: 0,
y: 0
};
var magnify;
var cur_img;
var ui = {
magniflier: $('.magniflier')
};
// Add the magnifying glass
if (ui.magniflier.length) {
var div = document.createElement('div');
div.setAttribute('class', 'glass');
ui.glass = $(div);
$('body').append(div);
}
// All the magnifying will happen on "mousemove"
var mouseMove = function(e) {
var $el = $(this);
// Container offset relative to document
var magnify_offset = cur_img.offset();
// Mouse position relative to container
// pageX/pageY - container's offsetLeft/offetTop
mouse.x = e.pageX - magnify_offset.left;
mouse.y = e.pageY - magnify_offset.top;
// The Magnifying glass should only show up when the mouse is inside
// It is important to note that attaching mouseout and then hiding
// the glass wont work cuz mouse will never be out due to the glass
// being inside the parent and having a higher z-index (positioned above)
if (
mouse.x < cur_img.width() &&
mouse.y < cur_img.height() &&
mouse.x > 0 &&
mouse.y > 0
) {
magnify(e);
} else {
ui.glass.fadeOut(100);
}
return;
};
var magnify = function(e) {
// The background position of div.glass will be
// changed according to the position
// of the mouse over the img.magniflier
//
// So we will get the ratio of the pixel
// under the mouse with respect
// to the image and use that to position the
// large image inside the magnifying glass
var rx = Math.round(mouse.x / cur_img.width() * native_width - ui.glass.width() / 2) * -1;
var ry = Math.round(mouse.y / cur_img.height() * native_height - ui.glass.height() / 2) * -1;
var bg_pos = rx + "px " + ry + "px";
// Calculate pos for magnifying glass
//
// Easy Logic: Deduct half of width/height
// from mouse pos.
// var glass_left = mouse.x - ui.glass.width() / 2;
// var glass_top = mouse.y - ui.glass.height() / 2;
var glass_left = e.pageX - ui.glass.width() / 2;
var glass_top = e.pageY - ui.glass.height() / 2;
//console.log(glass_left, glass_top, bg_pos)
// Now, if you hover on the image, you should
// see the magnifying glass in action
ui.glass.css({
left: glass_left,
top: glass_top,
backgroundPosition: bg_pos
});
return;
};
$('.magniflier').on('mousemove', function() {
ui.glass.fadeIn(200);
cur_img = $(this);
var large_img_loaded = cur_img.data('large-img-loaded');
var src = cur_img.data('large') || cur_img.attr('src');
// Set large-img-loaded to true
// cur_img.data('large-img-loaded', true)
if (src) {
ui.glass.css({
'background-image': 'url(' + src + ')',
'background-repeat': 'no-repeat'
});
}
// When the user hovers on the image, the script will first calculate
// the native dimensions if they don't exist. Only after the native dimensions
// are available, the script will show the zoomed version.
//if(!native_width && !native_height) {
if (!cur_img.data('native_width')) {
// This will create a new image object with the same image as that in .small
// We cannot directly get the dimensions from .small because of the
// width specified to 200px in the html. To get the actual dimensions we have
// created this image object.
var image_object = new Image();
image_object.onload = function() {
// This code is wrapped in the .load function which is important.
// width and height of the object would return 0 if accessed before
// the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
cur_img.data('native_width', native_width);
cur_img.data('native_height', native_height);
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
};
image_object.src = src;
return;
} else {
native_width = cur_img.data('native_width');
native_height = cur_img.data('native_height');
}
//}
//console.log(native_width, native_height);
mouseMove.apply(this, arguments);
ui.glass.on('mousemove', mouseMove);
});
ui.glass.on('mouseout', function() {
ui.glass.off('mousemove', mouseMove);
});
});
html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
position: fixed;
height: 100vh;
width: 100vw;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../assets/imgs/lightbox/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container>.nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev,
.lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../assets/imgs/lightbox/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../assets/imgs/lightbox/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #4ae;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../assets/imgs/lightbox/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* IF you remove this, lightbox will work but not the magnyfing glass */
.glass {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
cursor: crosshair;
/* Multiple box shadows to achieve the glass effect */
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/* hide the glass by default */
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--START BOOK PREVIEW-->
<div class="book-preview px-5 py-5 container img-magnifier-container">
<div class="row">
<div class="col-lg-4 book">
<a href="https://subsolardesigns.com/odrin/demo1/wp-content/uploads/sites/8/2017/08/cover_taurus-468x700.png" data-lightbox="image-1" data-title="My caption">
<img src="https://subsolardesigns.com/odrin/demo1/wp-content/uploads/sites/8/2017/08/cover_taurus-468x700.png" alt="Book" class="img-fluid magniflier" id="book-glass" alt="Responsive image">
</a>
</div>
</div>
</div>
The issue is that you are not clicking the image, but the .glass dom node. You need to handle the click event on the .glass element and then call click on the image, in order for the lightbox plugin to do what it expects to do. Add the code below to you javascript to redirect the click event to your image tag.
ui.glass.on('click', function() {
cur_img.click();
});
Related
I am making a John Conway's game of life and when I try run it by pressing space, it is actually bigger than what the console shows it to be. I set the div to be exactly 0.1% of the bigger grid which is in dark blue. But it seems to just be bigger or smaller. I also use panning and zooming for the project
//Important variable
var mainGrid = document.querySelector(".main-grid")
var windowWidth = document.documentElement.clientWidth
var windowHeight = document.documentElement.clientHeight
var time = 500
var Data = {
livingCells: [
[3,0],
[5,0],
[4,1],
[5,1]
]
}
//functions
var updateCells = (rle) => {
if (!rle) {
$(".main-grid").empty()
for (let i = 0; i < Data.livingCells.length; i++) {
const element = Data.livingCells[i];
$(".main-grid").append('<div id="'+i+'" class="on"></div>')
$('#'+i+'').css({ 'left': element[0]/10+'%', 'top': element[1]/10+'%' ,})
console.log(element[1])
}
}
}
var ID;
var cellInterval = () => {
ID = setInterval(() => {
updateCells()
}, time)
}
var intervalOn = false;
//listeners
document.body.onkeyup = function(e) {
if (e.key == " " ||
e.code == "Space" ||
e.keyCode == 32
) {
if(!intervalOn){
cellInterval()
intervalOn = true;
console.log("interval on")
} else {
clearInterval(ID)
intervalOn = false;
console.log("interval off")
}
}
}
// panzoom
panzoom(mainGrid, {
minZoom: 0.3,
maxZoom: 10,
initialZoom: 1.5,
initialX: mainGrid.offsetWidth/2,
initialY: mainGrid.offsetWidth,
bounds: true,
boundsPadding: 0.3
});
* {
padding: 0;
margin: 0;
outline: 0;
overflow: hidden;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: gray;
}
.main-grid{
width: 100vw;
height: 100vw;
background-color: rgb(0, 0, 0);
}
.hover:hover{
transition: 0.3s;
background-color: rgb(79, 124, 182);
transform: scale(1.2);
}
.on{
position: fixed;
height: 0.1%;
width: 0.1%;
background-color: white;
}
<body>
<div class="main-grid">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="crossorigin="anonymous"></script>
<script src='https://unpkg.com/panzoom#9.4.0/dist/panzoom.min.js'></script>
<script src="app.js"></script>
</body>
Have you tried Include
{
box-sizing: border-box;
}
Goodday Coders, Im struggling with this puzzle script that I want to use for a website's "meet the team" page.
I would like the puzzle to scramble as the page loads instead of having to press the shuffle button.
If people press the "Wie ben ik" button, the puzzle should solve, like it is doing right now.
Somehow I cant get it to work, it would be great if someone could help me out.
Here's the codepen link:
https://codepen.io/verberne/pen/WNxyprV
// Begin game once DOM loaded
document.addEventListener("DOMContentLoaded", game);
// document.addEventListener("DOMContentLoaded", shuffleTimeouts);
function game() {
// Data structure to hold positions of tiles
var parentX = document.querySelector(".sliding-puzzle").clientHeight;
var baseDistance = 38;
var tileMap = {
1: {
tileNumber: 1,
position: 1,
top: 0,
left: 0
},
2: {
tileNumber: 2,
position: 2,
top: 0,
left: baseDistance * 1
},
3: {
tileNumber: 3,
position: 3,
top: 0,
left: baseDistance * 2
},
4: {
tileNumber: 4,
position: 4,
top: baseDistance,
left: 0
},
5: {
tileNumber: 5,
position: 5,
top: baseDistance,
left: baseDistance
},
6: {
tileNumber: 6,
position: 6,
top: baseDistance,
left: baseDistance * 2
},
7: {
tileNumber: 7,
position: 7,
top: baseDistance * 2,
left: 0
},
8: {
tileNumber: 8,
position: 8,
top: baseDistance * 2,
left: baseDistance
},
empty: {
position: 9,
top: baseDistance * 2,
left: baseDistance * 2
}
}
// Array of tileNumbers in order of last moved
var history = [];
// Movement map
function movementMap(position) {
if (position == 9) return [6, 8];
if (position == 8) return [5, 7, 9];
if (position == 7) return [4, 8];
if (position == 6) return [3, 5, 9];
if (position == 5) return [2, 4, 6, 8];
if (position == 4) return [1, 5, 7];
if (position == 3) return [2, 6];
if (position == 2) return [1, 3, 5];
if (position == 1) return [2, 4];
}
// Board setup according to the tileMap
document.querySelector('#shuffle').addEventListener('click', shuffle, true);
document.querySelector('#solve').addEventListener('click', solve, true);
var tiles = document.querySelectorAll('.tile');
var delay = -50;
for (var i = 0; i < tiles.length; i++) {
tiles[i].addEventListener('click', tileClicked, true);
var tileId = tiles[i].innerHTML;
delay += 50;
setTimeout(setup, delay, tiles[i]);
}
function setup(tile) {
var tileId = tile.innerHTML;
// tile.style.left = tileMap[tileId].left + '%';
// tile.style.top = tileMap[tileId].top + '%';
var xMovement = parentX * (tileMap[tileId].left / 100);
var yMovement = parentX * (tileMap[tileId].top / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
recolorTile(tile, tileId);
}
function tileClicked(event) {
var tileNumber = event.target.innerHTML;
moveTile(event.target);
if (checkSolution()) {
console.log("You win!");
}
}
// Moves tile to empty spot
// Returns error message if tile cannot be moved
function moveTile(tile, recordHistory = true) {
// Check if Tile can be moved
// (must be touching empty tile)
// (must be directly perpendicular to empty tile)
var tileNumber = tile.innerHTML;
if (!tileMovable(tileNumber)) {
console.log("Tile " + tileNumber + " can't be moved.");
return;
}
// Push to history
if (recordHistory == true) {
if (history.length >= 3) {
if (history[history.length - 1] != history[history.length - 3]) history.push(tileNumber);
} else {
history.push(tileNumber);
}
}
// Swap tile with empty tile
var emptyTop = tileMap.empty.top;
var emptyLeft = tileMap.empty.left;
var emptyPosition = tileMap.empty.position;
tileMap.empty.top = tileMap[tileNumber].top;
tileMap.empty.left = tileMap[tileNumber].left;
tileMap.empty.position = tileMap[tileNumber].position;
// tile.style.top = emptyTop + '%';
// tile.style.left = emptyLeft + '%';
var xMovement = parentX * (emptyLeft / 100);
var yMovement = parentX * (emptyTop / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
tileMap[tileNumber].top = emptyTop;
tileMap[tileNumber].left = emptyLeft;
tileMap[tileNumber].position = emptyPosition;
recolorTile(tile, tileNumber);
}
// Determines whether a given tile can be moved
function tileMovable(tileNumber) {
var selectedTile = tileMap[tileNumber];
var emptyTile = tileMap.empty;
var movableTiles = movementMap(emptyTile.position);
if (movableTiles.includes(selectedTile.position)) {
return true;
} else {
return false;
}
}
// Returns true/false based on if the puzzle has been solved
function checkSolution() {
if (tileMap.empty.position !== 9) return false;
for (var key in tileMap) {
if ((key != 1) && (key != "empty")) {
if (tileMap[key].position < tileMap[key - 1].position) return false;
}
}
// Clear history if solved
history = [];
return true;
}
// Check if tile is in correct place!
function recolorTile(tile, tileId) {
if (tileId == tileMap[tileId].position) {
tile.classList.remove("error");
} else {
tile.classList.add("error");
}
}
// Shuffles the current tiles
shuffleTimeouts = [];
function shuffle() {
clearTimers(solveTimeouts);
var boardTiles = document.querySelectorAll('.tile');
var shuffleDelay = 200;
shuffleLoop();
var shuffleCounter = 0;
while (shuffleCounter < 20) {
shuffleDelay += 200;
shuffleTimeouts.push(setTimeout(shuffleLoop, shuffleDelay));
shuffleCounter++;
}
}
var lastShuffled;
function shuffleLoop() {
var emptyPosition = tileMap.empty.position;
var shuffleTiles = movementMap(emptyPosition);
var tilePosition = shuffleTiles[Math.floor(Math.floor(Math.random() * shuffleTiles.length))];
var locatedTile;
for (var i = 1; i <= 8; i++) {
if (tileMap[i].position == tilePosition) {
var locatedTileNumber = tileMap[i].tileNumber;
locatedTile = tiles[locatedTileNumber - 1];
}
}
if (lastShuffled != locatedTileNumber) {
moveTile(locatedTile);
lastShuffled = locatedTileNumber;
} else {
shuffleLoop();
}
}
function clearTimers(timeoutArray) {
for (var i = 0; i < timeoutArray.length; i++) {
clearTimeout(timeoutArray[i])
}
}
// Temporary function for solving puzzle.
// To be reimplemented with a more sophisticated algorithm
solveTimeouts = []
function solve() {
clearTimers(shuffleTimeouts);
repeater = history.length;
for (var i = 0; i < repeater; i++) {
console.log("started");
solveTimeouts.push(setTimeout(moveTile, i * 100, tiles[history.pop() - 1], false));
}
}
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
background-color: #ECF0F1;
-webkit-tap-highlight-color: transparent;
khtml-tap-highlight-color: transparent;
}
.sliding-puzzle-figure {
margin: auto;
height: 360px;
width: 360px;
padding-bottom: 50vh;
padding-top: 10vh;
}
.sliding-puzzle-figure a {
cursor: pointer;
}
.sliding-puzzle-figure a#shuffle {
color: #E74C3C;
}
.sliding-puzzle-figure a#solve {
color: #3498DB;
}
.sliding-puzzle-figure .sliding-puzzle {
list-style-type: none;
position: relative;
margin-left: 0;
margin-right: 00;
width: 360px;
height: 360px;
box-sizing: border-box;
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 18px solid #2C3E50;
border-radius: 10px;
background-color: #2C3E50;
}
.sliding-puzzle-figure .sliding-puzzle .tile {
position: absolute;
background: url(https://simonwiddowson.typepad.com/files/countryside360x360.jpg);
border-radius: 2px;
cursor: pointer;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0px;
left: 0%;
top: 0%;
transition: all 0.5s linear;
transition-timing-function: ease;
box-sizing: border-box;
}
.sliding-puzzle-figure .sliding-puzzle .tile.error {
background-color: #F0867D;
}
#tile1 {
background-position: left top;
}
#tile2 {
background-position: center top;
}
#tile3 {
background-position: right top;
}
#tile4 {
background-position: left center;
}
#tile5 {
background-position: center center;
}
#tile6 {
background-position: right center;
}
#tile7 {
background-position: left bottom;
}
#tile8 {
background-position: center bottom;
}
#media only screen and (max-width: 650px) {
.sliding-puzzle-figure {
width: 90vw;
height: 90vw;
max-height: 100vh;
}
.sliding-puzzle-figure .sliding-puzzle {
border-width: 10px;
border-radius: 14px;
}
.sliding-puzzle-figure .tile {
font-size: 1em;
}
}
/*# sourceMappingURL=style.css.map */
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<figure class="sliding-puzzle-figure">
<div class="sliding-puzzle">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
<div class="tile" id="tile6">6</div>
<div class="tile" id="tile7">7</div>
<div class="tile" id="tile8">8</div>
</div>
<figcaption><br><br> Barry Paling | <a id="shuffle">Shuffle</a> | <a id="solve">Wie ben ik</a>
</figcaption>
</figure>
You call game on load, remove the shuffle click and just call shuffle() at the end of game() :
window.addEventListener("load",game);
function game() {
...
shuffle();
}
window.addEventListener("load",game);
function game() {
// Data structure to hold positions of tiles
var parentX = document.querySelector(".sliding-puzzle").clientHeight;
var baseDistance = 38;
var tileMap = {
1: {
tileNumber: 1,
position: 1,
top: 0,
left: 0
},
2: {
tileNumber: 2,
position: 2,
top: 0,
left: baseDistance * 1
},
3: {
tileNumber: 3,
position: 3,
top: 0,
left: baseDistance * 2
},
4: {
tileNumber: 4,
position: 4,
top: baseDistance,
left: 0
},
5: {
tileNumber: 5,
position: 5,
top: baseDistance,
left: baseDistance
},
6: {
tileNumber: 6,
position: 6,
top: baseDistance,
left: baseDistance * 2
},
7: {
tileNumber: 7,
position: 7,
top: baseDistance * 2,
left: 0
},
8: {
tileNumber: 8,
position: 8,
top: baseDistance * 2,
left: baseDistance
},
empty: {
position: 9,
top: baseDistance * 2,
left: baseDistance * 2
}
}
// Array of tileNumbers in order of last moved
var history = [];
// Movement map
function movementMap(position) {
if (position == 9) return [6, 8];
if (position == 8) return [5, 7, 9];
if (position == 7) return [4, 8];
if (position == 6) return [3, 5, 9];
if (position == 5) return [2, 4, 6, 8];
if (position == 4) return [1, 5, 7];
if (position == 3) return [2, 6];
if (position == 2) return [1, 3, 5];
if (position == 1) return [2, 4];
}
// Board setup according to the tileMap
document.querySelector('#solve').addEventListener('click', solve, true);
var tiles = document.querySelectorAll('.tile');
var delay = -50;
for (var i = 0; i < tiles.length; i++) {
tiles[i].addEventListener('click', tileClicked, true);
var tileId = tiles[i].innerHTML;
delay += 50;
setTimeout(setup, delay, tiles[i]);
}
function setup(tile) {
var tileId = tile.innerHTML;
// tile.style.left = tileMap[tileId].left + '%';
// tile.style.top = tileMap[tileId].top + '%';
var xMovement = parentX * (tileMap[tileId].left / 100);
var yMovement = parentX * (tileMap[tileId].top / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
recolorTile(tile, tileId);
}
function tileClicked(event) {
var tileNumber = event.target.innerHTML;
moveTile(event.target);
if (checkSolution()) {
console.log("You win!");
}
}
// Moves tile to empty spot
// Returns error message if tile cannot be moved
function moveTile(tile, recordHistory = true) {
// Check if Tile can be moved
// (must be touching empty tile)
// (must be directly perpendicular to empty tile)
var tileNumber = tile.innerHTML;
if (!tileMovable(tileNumber)) {
console.log("Tile " + tileNumber + " can't be moved.");
return;
}
// Push to history
if (recordHistory == true) {
if (history.length >= 3) {
if (history[history.length - 1] != history[history.length - 3]) history.push(tileNumber);
} else {
history.push(tileNumber);
}
}
// Swap tile with empty tile
var emptyTop = tileMap.empty.top;
var emptyLeft = tileMap.empty.left;
var emptyPosition = tileMap.empty.position;
tileMap.empty.top = tileMap[tileNumber].top;
tileMap.empty.left = tileMap[tileNumber].left;
tileMap.empty.position = tileMap[tileNumber].position;
// tile.style.top = emptyTop + '%';
// tile.style.left = emptyLeft + '%';
var xMovement = parentX * (emptyLeft / 100);
var yMovement = parentX * (emptyTop / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
tileMap[tileNumber].top = emptyTop;
tileMap[tileNumber].left = emptyLeft;
tileMap[tileNumber].position = emptyPosition;
recolorTile(tile, tileNumber);
}
// Determines whether a given tile can be moved
function tileMovable(tileNumber) {
var selectedTile = tileMap[tileNumber];
var emptyTile = tileMap.empty;
var movableTiles = movementMap(emptyTile.position);
if (movableTiles.includes(selectedTile.position)) {
return true;
} else {
return false;
}
}
// Returns true/false based on if the puzzle has been solved
function checkSolution() {
if (tileMap.empty.position !== 9) return false;
for (var key in tileMap) {
if ((key != 1) && (key != "empty")) {
if (tileMap[key].position < tileMap[key - 1].position) return false;
}
}
// Clear history if solved
history = [];
return true;
}
// Check if tile is in correct place!
function recolorTile(tile, tileId) {
if (tileId == tileMap[tileId].position) {
tile.classList.remove("error");
} else {
tile.classList.add("error");
}
}
// Shuffles the current tiles
shuffleTimeouts = [];
function shuffle() {
clearTimers(solveTimeouts);
var boardTiles = document.querySelectorAll('.tile');
var shuffleDelay = 200;
shuffleLoop();
var shuffleCounter = 0;
while (shuffleCounter < 20) {
shuffleDelay += 200;
shuffleTimeouts.push(setTimeout(shuffleLoop, shuffleDelay));
shuffleCounter++;
}
}
var lastShuffled;
function shuffleLoop() {
var emptyPosition = tileMap.empty.position;
var shuffleTiles = movementMap(emptyPosition);
var tilePosition = shuffleTiles[Math.floor(Math.floor(Math.random() * shuffleTiles.length))];
var locatedTile;
for (var i = 1; i <= 8; i++) {
if (tileMap[i].position == tilePosition) {
var locatedTileNumber = tileMap[i].tileNumber;
locatedTile = tiles[locatedTileNumber - 1];
}
}
if (lastShuffled != locatedTileNumber) {
moveTile(locatedTile);
lastShuffled = locatedTileNumber;
} else {
shuffleLoop();
}
}
function clearTimers(timeoutArray) {
for (var i = 0; i < timeoutArray.length; i++) {
clearTimeout(timeoutArray[i])
}
}
// Temporary function for solving puzzle.
// To be reimplemented with a more sophisticated algorithm
solveTimeouts = []
function solve() {
clearTimers(shuffleTimeouts);
repeater = history.length;
for (var i = 0; i < repeater; i++) {
solveTimeouts.push(setTimeout(moveTile, i * 100, tiles[history.pop() - 1], false));
}
}
shuffle()
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
background-color: #ECF0F1;
-webkit-tap-highlight-color: transparent;
khtml-tap-highlight-color: transparent;
}
.sliding-puzzle-figure {
margin: auto;
height: 360px;
width: 360px;
padding-bottom: 50vh;
padding-top: 10vh;
}
.sliding-puzzle-figure a {
cursor: pointer;
}
.sliding-puzzle-figure a#shuffle {
color: #E74C3C;
}
.sliding-puzzle-figure a#solve {
color: #3498DB;
}
.sliding-puzzle-figure .sliding-puzzle {
list-style-type: none;
position: relative;
margin-left: 0;
margin-right: 00;
width: 360px;
height: 360px;
box-sizing: border-box;
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 18px solid #2C3E50;
border-radius: 10px;
background-color: #2C3E50;
}
.sliding-puzzle-figure .sliding-puzzle .tile {
position: absolute;
background: url(https://simonwiddowson.typepad.com/files/countryside360x360.jpg);
border-radius: 2px;
cursor: pointer;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0px;
left: 0%;
top: 0%;
transition: all 0.5s linear;
transition-timing-function: ease;
box-sizing: border-box;
}
.sliding-puzzle-figure .sliding-puzzle .tile.error {
background-color: #F0867D;
}
#tile1 {
background-position: left top;
}
#tile2 {
background-position: center top;
}
#tile3 {
background-position: right top;
}
#tile4 {
background-position: left center;
}
#tile5 {
background-position: center center;
}
#tile6 {
background-position: right center;
}
#tile7 {
background-position: left bottom;
}
#tile8 {
background-position: center bottom;
}
#media only screen and (max-width: 650px) {
.sliding-puzzle-figure {
width: 90vw;
height: 90vw;
max-height: 100vh;
}
.sliding-puzzle-figure .sliding-puzzle {
border-width: 10px;
border-radius: 14px;
}
.sliding-puzzle-figure .tile {
font-size: 1em;
}
}
/*# sourceMappingURL=style.css.map */
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<figure class="sliding-puzzle-figure">
<div class="sliding-puzzle">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
<div class="tile" id="tile6">6</div>
<div class="tile" id="tile7">7</div>
<div class="tile" id="tile8">8</div>
</div>
<figcaption><br><br> Barry Paling | <a id="solve">Wie ben ik</a>
</figcaption>
</figure>
Here is a link to the website so that you can visualize the error im expressing in my title:
https://glassesled.com/aubrey
If you hover over the picture the zoom box doesn't follow the cursor and when you go the lower portions of the image the zoom box reaches a wall. Here are the relevant files (the ones I think are relevant)
The CloudZoom.min.js file
//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
! function($) {
function format(t) {
for (var o = 1; o < arguments.length; o++) t = t.replace("%" + (o - 1), arguments[o]);
return t
}
function CloudZoom(t, o) {
var e, i, s, a, n, r, l, d, u = $("img", t),
p = null,
c = null,
h = null,
m = null,
f = null,
g = null,
v = 0,
x = 0,
b = 0,
y = 0,
z = 0,
w = 0,
O = this;
setTimeout(function() {
if (null === c) {
var o = t.width();
t.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', o / 3, o / 2 - o / 6)).find(":last").css("opacity", .5)
}
}, 200);
var k = function() {
null !== g && (g.remove(), g = null)
};
this.removeBits = function() {
h && (h.remove(), h = null), m && (m.remove(), m = null), f && (f.remove(), f = null), k(), $(".cloud-zoom-loading", t.parent()).remove()
}, this.destroy = function() {
t.data("zoom", null), c && (c.unbind(), c.remove(), c = null), p && (p.remove(), p = null), this.removeBits()
}, this.fadedOut = function() {
p && (p.remove(), p = null), this.removeBits()
}, this.controlLoop = function() {
if (h) {
var t = r - u.offset().left - .5 * a >> 0,
e = l - u.offset().top - .5 * n >> 0;
0 > t ? t = 0 : t > u.outerWidth() - a && (t = u.outerWidth() - a), 0 > e ? e = 0 : e > u.outerHeight() - n && (e = u.outerHeight() - n), h.css({
left: t,
top: e
}), h.css("background-position", -t + "px " + -e + "px"), x = t / u.outerWidth() * s.width >> 0, b = e / u.outerHeight() * s.height >> 0, z += (x - z) / o.smoothMove, y += (b - y) / o.smoothMove, p.css("background-position", -(z >> 0) + "px " + (-(y >> 0) + "px"))
}
v = setTimeout(function() {
O.controlLoop()
}, 30)
}, this.init2 = function(t, o) {
w++, 1 === o && (s = t), 2 === w && this.init()
}, this.init = function() {
$(".cloud-zoom-loading", t.parent()).remove();
var e = $(".mousetrap");
e && e.remove(), c = $.browser.msie ? t.parent().append(format("<div class='mousetrap' style='background-image:url(\"/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom.1.0.2/DummyPageForIE.htm\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;'></div>", u.outerWidth(), u.outerHeight(), 0, 0)).find(":last") : t.parent().append(format("<div class='mousetrap' style='z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;'></div>", u.outerWidth(), u.outerHeight(), 0, 0)).find(":last"), c.bind("mousemove", this, function(t) {
r = t.pageX, l = t.pageY
}), c.bind("mouseleave", this, function(t) {
return clearTimeout(v), h && h.fadeOut(299), m && m.fadeOut(299), f && f.fadeOut(299), p.fadeOut(300, function() {
O.fadedOut()
}), !1
}), c.bind("mouseenter", this, function(e) {
r = e.pageX, l = e.pageY, d = e.data, p && (p.stop(!0, !1), p.remove());
var i = o.adjustX,
v = o.adjustY,
x = u.outerWidth(),
b = u.outerHeight(),
y = o.zoomWidth,
z = o.zoomHeight;
"auto" == o.zoomWidth && (y = x), "auto" == o.zoomHeight && (z = b);
var w = t.parent();
switch (o.position) {
case "top":
v -= z;
break;
case "right":
i += x;
break;
case "bottom":
v += b;
break;
case "left":
i -= y;
break;
case "inside":
y = x, z = b;
break;
default:
w = $("#" + o.position), w.length ? (y = o.zoomWidth, z = o.zoomHeight) : (w = t, i += x, v += b)
}
p = w.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', i, v, y, z, s.src)).find(":last"), u.attr("title") && o.showTitle && p.append(format('<div class="cloud-zoom-title">%0</div>', u.attr("title"))).find(":last").css("opacity", o.titleOpacity), $.browser.msie && $.browser.version < 7 && (g = $('<iframe frameborder="0" src="#"></iframe>').css({
position: "absolute",
left: i,
top: v,
zIndex: 99,
width: y,
height: z
}).insertBefore(p)), p.fadeIn(500), h && (h.remove(), h = null), a = u.outerWidth() / s.width * p.width(), n = u.outerHeight() / s.height * p.height(), h = t.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", a, n)).find(":last"), c.css("cursor", h.css("cursor"));
var O = !1;
o.tint && (h.css("background", 'url("' + u.attr("src") + '")'), m = t.append(format('<div class="cloud-zoom-tint" style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', u.outerWidth(), u.outerHeight(), o.tint)).find(":last"), m.css("opacity", o.tintOpacity), O = !0, m.fadeIn(500)), o.softFocus && (h.css("background", 'url("' + u.attr("src") + '")'), f = t.append(format('<div class="cloud-zoom-softfocus" style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', u.outerWidth() - 2, u.outerHeight() - 2, o.tint)).find(":last"), f.css("background", 'url("' + u.attr("src") + '")'), f.css("opacity", .5), O = !0, f.fadeIn(500)), O || h.css("opacity", o.lensOpacity), "inside" !== o.position && h.fadeIn(500), d.controlLoop()
})
}, e = new Image, $(e).load(function() {
O.init2(this, 0)
}), e.src = u.attr("src"), i = new Image, $(i).load(function() {
O.init2(this, 1)
}), i.src = t.attr("href")
}
$(document).ready(function() {
$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom()
}), $.fn.CloudZoom = function(options) {
try {
document.execCommand("BackgroundImageCache", !1, !0)
} catch (e) {}
return this.each(function() {
var relOpts, opts;
eval("var a = {" + $(this).attr("rel") + "}"), relOpts = a, $(this).is(".cloud-zoom") ? ($(this).css({
position: "relative",
display: "block"
}), $("img", $(this)).css({
display: "block"
}), "wrap" != $(this).parent().attr("id") && $(this).wrap('<div id="wrap" style="top:0px;position:relative;"></div>'), opts = $.extend({}, $.fn.CloudZoom.defaults, options), opts = $.extend({}, opts, relOpts), $(this).data("zoom", new CloudZoom($(this), opts))) : $(this).is(".cloud-zoom-gallery") && (opts = $.extend({}, relOpts, options), $(this).data("relOpts", opts), $(this).bind("click", $(this), function(t) {
var o = t.data.data("relOpts");
return $("#" + o.useZoom).data("zoom").destroy(), $("#" + o.useZoom).attr("href", t.data.attr("href")), $("#" + o.useZoom).attr("rel", t.data.attr("rel")), $("#" + o.useZoom + " img").attr("title", t.data.attr("title")), $("#" + o.useZoom + " img").attr("src", t.data.data("relOpts").smallImage), $("#" + t.data.data("relOpts").useZoom).CloudZoom(), !1
}))
}), this
}, $.fn.CloudZoom.defaults = {
zoomWidth: "auto",
zoomHeight: "auto",
position: "right",
tint: !1,
tintOpacity: .5,
lensOpacity: .5,
softFocus: !1,
smoothMove: 3,
showTitle: !0,
titleOpacity: .5,
adjustX: 0,
adjustY: 0
}
}(jQuery);
CSS file used in cshtml
/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/
#media all and (max-width: 1000px) {
#sevenspikes-cloud-zoom:before {
display: none;
}
#sevenspikes-cloud-zoom img {
position: static;
}
}
#media all and (min-width: 1001px) {
/* theme overwritting styles */
.gallery {
font-size: 0;
}
.gallery .picture-wrapper {
/*** !!! set line-height to the appropriate height !!! ***/
line-height: 320px;
}
.gallery .picture-wrapper .picture:before {
display: none;
}
/* main picture styles */
#sevenspikes-cloud-zoom {
margin: 0;
overflow: visible;
text-align: center;
font-size: 0;
}
#sevenspikes-cloud-zoom:before {
display: none;
}
#wrap {
display: block;
max-width: 100%;
vertical-align: middle;
line-height: 0;
}
#wrap a {
position: relative;
max-width: 100%;
vertical-align: middle;
line-height: 0;
overflow: hidden;
}
#wrap a:before {
content: "";
display: block;
padding-top: 125%;
}
#wrap img {
}
/* This is the overlay element. */
#wrap > .mousetrap {
right: 0;
bottom: 0;
margin: auto;
}
.cloud-zoom-lens {
margin: 0;
border: none;
background-color: #fff;
cursor: crosshair;
}
/* This is the zoom window. */
#cloudZoomWindowElement {
left: 0;
top: 0;
z-index: 1;
}
#cloud-zoom-big {
border: none;
overflow: hidden;
bottom: 0;
margin: auto;
}
.overview #cloud-zoom-big {
position: static !important; /* fix for the zoom window so that its wrapper takes the dimensions */
}
/* This is for the title text. */
.cloud-zoom-title {
background-color: #000;
padding: 5px;
text-align: center;
font-size: 11px;
line-height: normal;
font-weight: bold;
color: #fff;
}
/* This is the loading message. */
.cloud-zoom-loading {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
font-size: 0;
background: rgba(255,255,255,.5);
opacity: 1 !important;
}
#keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cloud-zoom-loading:after,
.cloud-zoom-loading:before {
content: '';
position: absolute;
border: 2px solid #454545;
width: 30px;
height: 30px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
outline: 1px solid transparent; /*firefox fix*/
}
.cloud-zoom-loading:after {
animation: spinner 2.5s linear infinite;
}
.cloud-zoom-loading:before {
width: 44px;
height: 44px;
animation: spinner 2.5s linear infinite;
animation-direction: reverse;
}
/* with product ribbons enabled */
.gallery .ribbon-wrapper {
/*never display as inline or inline-block*/
vertical-align: middle;
line-height: 0;
}
.gallery .ribbon-wrapper:hover .ribbon-position {
opacity: 0;
}
}
CSHTML file
#** Copyright 2016 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*#
#using Nop.Core
#using Nop.Core.Infrastructure
#using SevenSpikes.Nop.Plugins.CloudZoom.Models
#model CloudZoomModel
#if (!string.IsNullOrEmpty(Model.DefaultPicture.FullSizeImageUrl))
{
Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Content/cloud-zoom.1.0.2/CloudZoom.css");
var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
if (supportRtl)
{
Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Styles/CloudZoom.common.rtl.css");
}
Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.min.js");
Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js");
if (Model.IsIntegratedByWidget)
{
Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/CloudZoom.min.js");
}
if (Model.EnableClickToZoom)
{
Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
Html.AddScriptParts("~/Scripts/jquery.magnific-popup.min.js");
<script type="text/javascript">
$(document).ready(function () {
$(".picture").on("click", ".mousetrap", function () {
var mainPictureHref = $('.picture a.cloud-zoom').attr('href');
var cloudZoomThumbs = $('.picture-thumbs a.cloud-zoom-gallery');
var imgSources = new Array();
var imgItem = function(source) {
this.src = source;
};
cloudZoomThumbs.each(function(){
imgSources.push(new imgItem($(this).attr('href')));
});
if(imgSources.length === 0){
imgSources.push(new imgItem(mainPictureHref));
}
$.magnificPopup.open({
items: imgSources,
type: 'image',
removalDelay: 300,
gallery: {
enabled: true
}
}, cloudZoomThumbs.filter('.active').index());
});
});
</script>
}
<script type="text/javascript">
#{
string pictureAdjustmentTableName = string.Format("productAttributeValueAdjustmentTable_{0}", Model.ProductId);
string pictureAdjustmentFuncName = string.Format("adjustProductAttributeValuePicture_CloudZoom_{0}", Model.ProductId);
string pictureFullSizePrefix = "fullsize";
}
function #(pictureAdjustmentFuncName)(controlId) {
var ctrl = $('#' + controlId);
var pictureFullSizeUrl = '';
if((ctrl.is(':radio') && ctrl.is(':checked')) || (ctrl.is(':checkbox') && ctrl.is(':checked'))) {
pictureFullSizeUrl = #(pictureAdjustmentTableName)[controlId + '_#(pictureFullSizePrefix)'];
} else if(ctrl.is('select')) {
var idx = $('#' + controlId + " option").index($('#' + controlId + " option:selected"));
if(idx !== -1) {
pictureFullSizeUrl = #(pictureAdjustmentTableName)[controlId + '_#(pictureFullSizePrefix)'][idx];
}
}
if (typeof pictureFullSizeUrl == 'string' && pictureFullSizeUrl !== '') {
var zoomGallerySelector = ".cloud-zoom-gallery[href='" + pictureFullSizeUrl + "']";
$(zoomGallerySelector).click();
$.event.trigger({
type: 'nopMainProductImageChanged',
target: ctrl,
pictureDefaultSizeUrl: pictureFullSizeUrl,
pictureFullSizeUrl: pictureFullSizeUrl
});
}
}
$(document).ready(function () {
$("[id^='product_attribute_']").on('change', function() {
#(pictureAdjustmentFuncName)($(this).attr('id'));
});
});
</script>
<div class="gallery sevenspikes-cloudzoom-gallery">
<div class="picture-wrapper">
<div class="picture" id="sevenspikes-cloud-zoom" data-zoomwindowelementid="#Model.ElementId"
data-selectoroftheparentelementofthecloudzoomwindow="#Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow"
data-defaultimagecontainerselector="#Model.SettingsModel.DefaultImageContainerSelector">
<a href="#Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="#Model.DefaultPicture.DefaultRelation">
<img src="#Model.DefaultPicture.SmallImageUrl" alt="#Model.DefaultPicture.AlternateText" title="#Model.DefaultPicture.Title" id="cloudZoomImage" itemprop="image" />
</a>
#if (Model.Pictures.Count > 1)
{
<div class="picture-thumbs-navigation-arrow picture-thumbs-prev-arrow">
<span>#T("SevenSpikes.Themes.Uptown.Product.ImageThumbs.Prev")</span>
<img src="#Model.DefaultPicture.TinyImageUrl" data-fullSizeImageUrl="#Model.DefaultPicture.FullSizeImageUrl" alt="Previous" />
</div>
<div class="picture-thumbs-navigation-arrow picture-thumbs-next-arrow">
<span>#T("SevenSpikes.Themes.Uptown.Product.ImageThumbs.Next")</span>
<img src="#Model.DefaultPicture.TinyImageUrl" data-fullSizeImageUrl="#Model.DefaultPicture.FullSizeImageUrl" alt="Next" />
</div>
<div class="picture-thumbs">
#foreach (var picture in Model.Pictures)
{
<a class="cloud-zoom-gallery" href="#picture.FullSizeImageUrl" title="#picture.Title" rel="#picture.GalleryRelation">
<img class="cloud-zoom-gallery-img" src="#picture.TinyImageUrl" alt="#picture.AlternateText" title="#picture.Title" />
</a>
}
</div>
}
</div>
</div>
</div>
}
Any ideas? More files needed to resolve this issue? LMK!
Please I need I help on how to implement something like this responsively using bootstrap
html code for is displayed below
<div class="wrapper">
<div class="container">
<div class="special">
<div id="counter">
<div id="shading"></div>
</div>
</div>
</div>
please below is the css file for the above html code
.special
{
position: relative;
width: 840px;
height: 247px;
background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png');
background-position: -10px 74px;
background-repeat: no-repeat;
}
#counter
{
position: absolute;
top: 135px;
left: 279px;
z-index: 4000;
}
.digit-separator
{
position: relative;
float: left;
width: 17px;
height: 44px;
overflow: hidden;
background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digit_separator.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
.digit
{
background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digits.png');
}
#shading
{
background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/sprites.png');
background-position: 0px -396px;
background-repeat: repeat-x;
float: left;
height: 44px;
position: absolute;
width: 291px;
z-index: 4100;
top: 0;
left: 0;
}
please this is the JavaScript code for the above html code
function C3Counter(id, opt) {
this.options = {
stepTime: 60, // not used
format: "dd:hh:mm:ss", // not used
startTime: "01:04:40:59",
digitImages: 1,
digitWidth: 30,
digitHeight: 44,
digitSlide : true,
digitSlideTime : 200,
digitImageHeight : 484,
digitAnimationHeight : 44,
timerEnd: function(){},
image: "digits.png",
updateInterval : 1000
};
var s;
if (typeof opt != "undefined") {
for (s in this.options) {
if (typeof opt[s] != "undefined") {
this.options[s] = opt[s];
}
}
}
if (String(options.startTime).indexOf(":") == -1) {
options.tempStartTime = options.startTime;
} else {
//TODO - does not convert time with : to seconds to count
var td = new Date(options.startTime);
}
this.pad2 = function(number) {
return (number < 10 ? '0' : '') + number;
}
var timer = setInterval( "this.updateCounter()", options.updateInterval);
var startTime = new Date().getTime();
var secNo = 0;
var timerSingle = new Array();
var dc = 0;
var digits = new Array();
var d = new Date();
var lastTime = d.getTime();
this.calculateTime = function() {
var tempTime = options.tempStartTime;
if (String(options.tempStartTime).indexOf(":") == -1) {
var seconds=Math.round(options.tempStartTime % 60);
options.tempStartTime=Math.floor(options.tempStartTime/60);
var minutes=Math.round(options.tempStartTime % 60);
options.tempStartTime=Math.floor(options.tempStartTime/60);
var hours=Math.round(options.tempStartTime % 24);
options.tempStartTime=Math.floor(options.tempStartTime/24);
var days=Math.round(options.tempStartTime);
options.timeStr = this.pad2(days)+this.pad2(hours)+this.pad2(minutes)+this.pad2(seconds);
}
var currTime = new Date().getTime();
var diff = currTime - startTime;
options.tempStartTime = options.startTime - Math.round(diff/1000);
}
this.calculateTime();
for (dc=0; dc<8; dc++) {
digits[dc] = { digit: this.options.timeStr.charAt(dc)};
$("#"+id).append("<div id='digit"+dc+"' style='position:relative;float:left;width:"+this.options.digitWidth+"px;height:"+this.options.digitHeight+"px;overflow:hidden;'><div class='digit' id='digit-bg"+dc+"' style='position:absolute; top:-"+digits[dc].digit*this.options.digitAnimationHeight+"px; width:"+this.options.digitWidth+"px; height:"+this.options.digitImageHeight+"px; '></div></div>");
if (dc % 2 == 1 && dc < 6) {
$("#"+id).append("<div class='digit-separator' style='float:left;'></div>");
}
}
$("#"+id).append("<div style='clear:both'></div>");
this.animateDigits = function() {
for (var dc=0; dc<8; dc++) {
digits[dc].digitNext = Number(this.options.timeStr.charAt(dc));
digits[dc].digitNext = (digits[dc].digitNext + 10)%10;
var no = dc;
if (digits[no].digit == 0) $("#digit-bg"+no).css("top", -this.options.digitImageHeight+this.options.digitHeight + "px");
if (digits[no].digit != digits[no].digitNext) {
$("#digit-bg"+no).animate( { "top" : -digits[no].digitNext*options.digitHeight+"px"}, options.digitSlideTime);
digits[no].digit = digits[no].digitNext;
}
}
var end = this.checkEnd();
}
this.checkEnd = function() {
for (var i = 0; i < digits.length; i++) {
if (digits[i].digit != 0) {
return false;
}
}
clearInterval(timer);
this.options.timerEnd();
return true;
}
this.updateCounter = function() {
d = new Date();
if ((d.getTime() - lastTime) < (options.updateInterval - 50)) {
return;
}
lastTime = d.getTime();
this.calculateTime();
this.animateDigits();
}
}
C3Counter("counter", { startTime :16100 });
Note* you need to use Bootstrap v3.3.4 or higher and jQuery v2.1.3 or higher
Note* This doesnt look like the exact example you linked to. Its not posible to achieve that with default boostrap library.
html:
<div class="wrapper">
<div class="special">
<span id="clock"></span>
</div>
</div>
js:
$('#clock').countdown('2020/10/10', function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
css:
.wrapper
{
width: 100%;
height: auto;
background-color: #dc403b;
}
.special
{
width:100%;
background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png');
background-position: cover;
background-repeat: no-repeat;
text-align: center;
padding: 50px 0;
font-size: 18px;
}
I recently had some help here creating a justified gallery with hover overlay content. It is based on this justified gallery - http://miromannino.github.io/Justified-Gallery/
I have managed to create everything apart from getting it to be responsive.
I have create a JSFiddle to see anyone can help me.
I've been at this for a week.... hoping I can find the end of my journey here :-)
https://jsfiddle.net/747tgcec/
HTML (snippet)
<section id="gallery" class="bh" style="height: 611px;">
<div id="mygallery" class="justified-gallery" style="height: 2398.01027268233px;">
<div class="single_image" style="width: 350px; height: 260px; top: 0px; left: 0px; opacity: 1;">
<img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Img-2-350x260.jpg" style="width: 350px; height: 260px; margin-left: -175.5px; margin-top: -130.5px;">
<div class="image_overlay text-center">
<div class="wrapper">
<div class="view-bigger">
<a class="single_image" href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery-12.jpg" rel="gallery">Grow Icon</a>
</div>
<div class="download">
Download ICON
</div>
<div class="content">
<a target="_blank" href="https://twitter.com/share?url=http://www.dangoodofficial.co.uk/&text=Check out #DanGoodeMusic"><span>Tweet Me</span>#DanGoodeMusic</a>
</div>
</div>
</div>
</div>
<div class="single_image" style="width: 400px; height: 260px; top: 0px; left: 350px; opacity: 1;">
<img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Img-2-400x260.jpg" style="width: 400px; height: 260px; margin-left: -200.5px; margin-top: -130.5px;">
<div class="image_overlay text-center">
<div class="wrapper">
<div class="view-bigger">
<a class="single_image" href="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Gallery1.jpg" rel="gallery">View Bigger</a>
</div>
<div class="download">
Download
</div>
<div class="content">
<a target="_blank" href="https://twitter.com/share?url=http://www.thesaxman.com/&text=Check out #TheSaxManUK"><span>Click to Tweet</span>“Check out #TheSaxManUK”</a>
</div>
</div>
</div>
</div>
<div class="single_image" style="width: 400px; height: 260px; top: 0; left: 750px; opacity: 1;">
<img src="http://dangoodeofficial.co.uk/wp-content/uploads/Dan-Goode-Img-3-400x260.jpg" style="width: 400px; height: 260px; margin-left: -200.5px; margin-top: -130.5px;">
<div class="image_overlay text-center">
<div class="wrapper">
<div class="view-bigger">
<a class="single_image" href="http://thesaxman.com/wp-content/themes/thesaxman/library/img/gallery/image19.jpg" rel="gallery">View Bigger</a>
</div>
<div class="download">
Download
</div>
<div class="content">
<a target="_blank" href="https://twitter.com/share?url=http://www.thesaxman.com/&text=Check out #TheSaxManUK"><span>Click to Tweet</span>“Check out #TheSaxManUK”</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
section#gallery {
background-color:
}
section#gallery div .image_overlay {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: rgba(1, 62, 187,0.8);
opacity:0; position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
z-index:100;
display:block;
border:2px solid #bc0001;
border: 2px solid #ffffff
}
section#gallery div:hover>.image_overlay {
opacity:1;
}
section#gallery div .image_overlay .wrapper {
display: table;
width: 100%;
height: 100%;
position:relative;
}
section#gallery div .image_overlay .wrapper .content {
display: table-cell;
text-align: center;
vertical-align: middle;
color:rgba(255,255,255,1.00);font-size:22px;}
section#gallery div .image_overlay .wrapper .content a { color:rgba(255,255,255,1.00)
}
section#gallery div .image_overlay .wrapper .view-bigger {
position:absolute;
top:10px;
right:10px;
color:rgba(255,255,255,1.00);
}
section#gallery div .image_overlay .wrapper .view-bigger a {
color:rgba(255,255,255,1.00) !important
}
section#gallery div .image_overlay .wrapper .view-bigger a:after {
content:"\f504";
display:inline-block;
-webkit-font-smoothing:antialiased;
font:normal 20px/1 'dashicons';
vertical-align:top;
margin-left:5px;
}
section#gallery div .image_overlay .wrapper .download {
position:absolute;
bottom:10px;
left:10px;
color:rgba(255,255,255,1.00);
}
section#gallery div .image_overlay .wrapper .download a {
color:rgba(255,255,255,1.00) !important
}
section#gallery div .image_overlay .wrapper .download a:after {
content: "\f316";
display: inline-block;
-webkit-font-smoothing:
antialiased;font: normal 20px/1 'dashicons';
vertical-align: top;
margin-left:5px;
}
section#gallery div .image_overlay .wrapper .content span {
display:block;
font-size:30px;
font-family: "museo";}
.image_overlay {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: rgba(1, 62, 187,0.8);
opacity: 0;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 100;
display: block;
border: 1px solid rgba(255,255,255,1.00);
}
.image_overlay .wrapper {
display: table;
width: 100%;
height: 100%;
position: relative;
}
.image_overlay .wrapper .view-bigger {
position: absolute;
top: 10px;
right: 10px;
color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .download {
position: absolute;
bottom: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .content {
font-family: Righteous;
display: table-cell;
text-align: center;
vertical-align: middle;
color: rgba(255,255,255,1.00);
font-size: 32px;
}
.image_overlay .wrapper .content a {
color: rgba(255,255,255,1.00);
}
.image_overlay .wrapper .content span {
display: block;
font-size: 40px;
font-family: "museo";
}
#-webkit-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0
}
to {
opacity: .7
}
}
#-moz-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0
}
to {
opacity: .7
}
}
#-o-keyframes justified-gallery-show-caption-animation {
from {
opacity: 0
}
to {
opacity: .7
}
}
#keyframes justified-gallery-show-caption-animation {
from {
opacity: 0
}
to {
opacity: .7
}
}
#-webkit-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
#-moz-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
#-o-keyframes justified-gallery-show-entry-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes justified-gallery-show-entry-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
.justified-gallery {
width: 100%;
position: relative;
overflow: hidden
}
.justified-gallery>a, .justified-gallery>div {
position: absolute;
display: inline-block;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0)
}
.justified-gallery>a>img, .justified-gallery>div>img {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: 0
}
.justified-gallery>a>img, .justified-gallery>div>img:hover {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: 0;
}
JAVASCRIPT
! function(a) {
a.fn.justifiedGallery = function(b) {
function c(a, b, c) {
var d;
return d = a > b ? a : b, 100 >= d ? c.settings.sizeRangeSuffixes
.lt100 : 240 >= d ? c.settings.sizeRangeSuffixes.lt240 :
320 >= d ? c.settings.sizeRangeSuffixes.lt320 : 500 >=
d ? c.settings.sizeRangeSuffixes.lt500 : 640 >= d ? c.settings
.sizeRangeSuffixes.lt640 : c.settings.sizeRangeSuffixes
.lt1024
}
function d(a, b) {
return -1 !== a.indexOf(b, a.length - b.length)
}
function e(a, b) {
return a.substring(0, a.length - b.length)
}
function f(a, b) {
var c = !1;
for (var e in b.settings.sizeRangeSuffixes)
if (0 !== b.settings.sizeRangeSuffixes[e].length) {
if (d(a, b.settings.sizeRangeSuffixes[e])) return b
.settings.sizeRangeSuffixes[e]
} else c = !0;
if (c) return "";
throw "unknown suffix for " + a
}
function g(a, b, d, g) {
var h = a.match(g.settings.extension),
i = null != h ? h[0] : "",
j = a.replace(g.settings.extension, "");
return j = e(j, f(j, g)), j += c(b, d, g) + i
}
function h(b) {
var c = a(b.currentTarget).find(".caption");
b.data.settings.cssAnimation ? c.addClass("caption-visible")
.removeClass("caption-hidden") : c.stop().fadeTo(b.data
.settings.captionSettings.animationDuration, b.data
.settings.captionSettings.visibleOpacity)
}
function i(b) {
var c = a(b.currentTarget).find(".caption");
b.data.settings.cssAnimation ? c.removeClass(
"caption-visible").removeClass("caption-hidden") :
c.stop().fadeTo(b.data.settings.captionSettings.animationDuration,
b.data.settings.captionSettings.nonVisibleOpacity)
}
function j(a, b, c) {
c.settings.cssAnimation ? (a.addClass("entry-visible"), b()) :
a.stop().fadeTo(c.settings.imagesAnimationDuration, 1,
b)
}
function k(a, b) {
b.settings.cssAnimation ? a.removeClass("entry-visible") :
a.stop().fadeTo(0, 0)
}
function l(b, c, d, e, f, k, l) {
function m() {
o !== p && n.attr("src", p)
}
var n = b.find("img");
n.css("width", e), n.css("height", f), n.css("margin-left", -
e / 2), n.css("margin-top", -f / 2), b.width(e), b.height(
k), b.css("top", d), b.css("left", c);
var o = n.attr("src"),
p = g(o, e, f, l);
n.one("error", function() {
n.attr("src", n.data("jg.originalSrc"))
}), "skipped" === n.data("jg.loaded") ? n.one("load",
function() {
j(b, m, l), n.data("jg.loaded", "loaded")
}) : j(b, m, l);
var q = b.data("jg.captionMouseEvents");
if (l.settings.captions === !0) {
var r = b.find(".caption");
if (0 === r.length) {
var s = n.attr("alt");
"undefined" == typeof s && (s = b.attr("title")),
"undefined" != typeof s && (r = a(
'<div class="caption">' + s + "</div>"),
b.append(r))
}
0 !== r.length && (l.settings.cssAnimation || r.stop().fadeTo(
l.settings.imagesAnimationDuration, l.settings
.captionSettings.nonVisibleOpacity),
"undefined" == typeof q && (q = {
mouseenter: h,
mouseleave: i
}, b.on("mouseenter", void 0, l, q.mouseenter),
b.on("mouseleave", void 0, l, q.mouseleave),
b.data("jg.captionMouseEvents", q)))
} else "undefined" != typeof q && (b.off("mouseenter", void 0,
l, q.mouseenter), b.off("mouseleave", void 0, l,
q.mouseleave), b.removeData(
"jg.captionMouseEvents"))
}
function m(a, b) {
var c, d, e, f, g, h, i = a.settings,
j = !0,
k = 0,
l = a.galleryWidth - (a.buildingRow.entriesBuff.length -
1) * i.margins,
m = l / a.buildingRow.aspectRatio,
n = a.buildingRow.width / l > i.justifyThreshold;
if (b && "hide" === i.lastRow && !n) {
for (c = 0; c < a.buildingRow.entriesBuff.length; c++) d =
a.buildingRow.entriesBuff[c], i.cssAnimation ? d.removeClass(
"entry-visible") : d.stop().fadeTo(0, 0);
return -1
}
for (b && !n && "nojustify" === i.lastRow && (j = !1), c =
0; c < a.buildingRow.entriesBuff.length; c++) e = a.buildingRow
.entriesBuff[c].find("img"), f = e.data("jg.imgw") / e.data(
"jg.imgh"), j ? (g = m * f, h = m) : (g = i.rowHeight *
f, h = i.rowHeight), e.data("jg.jimgw", Math.ceil(g)),
e.data("jg.jimgh", Math.ceil(h)), (0 === c || k > h) &&
(k = h);
return i.fixedHeight && k > i.rowHeight && (k = i.rowHeight), {
minHeight: k,
justify: j
}
}
function n(a) {
a.lastAnalyzedIndex = -1, a.buildingRow.entriesBuff = [], a
.buildingRow.aspectRatio = 0, a.buildingRow.width = 0,
a.offY = 0
}
function o(a, b) {
var c, d, e, f, g = a.settings,
h = 0;
if (f = m(a, b), e = f.minHeight, b && "hide" === g.lastRow &&
-1 === e) return a.buildingRow.entriesBuff = [], a.buildingRow
.aspectRatio = 0, void(a.buildingRow.width = 0);
g.maxRowHeight > 0 && g.maxRowHeight < e ? e = g.maxRowHeight :
0 === g.maxRowHeight && 1.5 * g.rowHeight < e && (e = 1.5 * g.rowHeight);
for (var i = 0; i < a.buildingRow.entriesBuff.length; i++) c =
a.buildingRow.entriesBuff[i], d = c.find("img"), l(c, h,
a.offY, d.data("jg.jimgw"), d.data("jg.jimgh"), e,
a), h += d.data("jg.jimgw") + g.margins;
a.$gallery.height(a.offY + e + (a.spinner.active ? a.spinner
.$el.innerHeight() : 0)), (!b || e <= a.settings.rowHeight &&
f.justify) && (a.offY += e + a.settings.margins, a.buildingRow
.entriesBuff = [], a.buildingRow.aspectRatio = 0, a
.buildingRow.width = 0, a.$gallery.trigger(
"jg.rowflush"))
}
function p(a) {
a.checkWidthIntervalId = setInterval(function() {
var b = parseInt(a.$gallery.width(), 10);
a.galleryWidth !== b && (a.galleryWidth = b, n(
a), t(a, !0))
}, a.settings.refreshTime)
}
function q(a) {
clearInterval(a.intervalId), a.intervalId = setInterval(
function() {
a.phase < a.$points.length ? a.$points.eq(a.phase)
.fadeTo(a.timeslot, 1) : a.$points.eq(a.phase -
a.$points.length).fadeTo(a.timeslot, 0),
a.phase = (a.phase + 1) % (2 * a.$points.length)
}, a.timeslot)
}
function r(a) {
clearInterval(a.intervalId), a.intervalId = null
}
function s(a) {
a.yield.flushed = 0, null !== a.imgAnalyzerTimeout &&
clearTimeout(a.imgAnalyzerTimeout)
}
function t(a, b) {
s(a), a.imgAnalyzerTimeout = setTimeout(function() {
u(a, b)
}, .001), u(a, b)
}
function u(b, c) {
for (var d, e = b.settings, f = b.lastAnalyzedIndex + 1; f <
b.entries.length; f++) {
var g = a(b.entries[f]),
h = g.find("img");
if (h.data("jg.loaded") === !0 || "skipped" === h.data(
"jg.loaded")) {
d = f >= b.entries.length - 1;
var i = b.galleryWidth - (b.buildingRow.entriesBuff
.length - 1) * e.margins,
j = h.data("jg.imgw") / h.data("jg.imgh");
if (i / (b.buildingRow.aspectRatio + j) < e.rowHeight &&
(o(b, d), ++b.yield.flushed >= b.yield.every))
return void t(b, c);
b.buildingRow.entriesBuff.push(g), b.buildingRow.aspectRatio +=
j, b.buildingRow.width += j * e.rowHeight, b.lastAnalyzedIndex =
f
} else if ("error" !== h.data("jg.loaded")) return
}
b.buildingRow.entriesBuff.length > 0 && o(b, !0), b.spinner
.active && (b.spinner.active = !1, b.$gallery.height(b.$gallery
.height() - b.spinner.$el.innerHeight()), b.spinner
.$el.detach(), r(b.spinner)), s(b), b.$gallery.trigger(
c ? "jg.resize" : "jg.complete")
}
function v(a) {
function b(a) {
if ("string" != typeof d.sizeRangeSuffixes[a]) throw "sizeRangeSuffixes." +
a + " must be a string"
}
function c(a, b) {
if ("string" == typeof a[b]) {
if (a[b] = parseFloat(a[b], 10), isNaN(a[b]))
throw "invalid number for " + b
} else {
if ("number" != typeof a[b]) throw b +
" must be a number";
if (isNaN(a[b])) throw "invalid number for " +
b
}
}
var d = a.settings;
if ("object" != typeof d.sizeRangeSuffixes) throw "sizeRangeSuffixes must be defined and must be an object";
if (b("lt100"), b("lt240"), b("lt320"), b("lt500"), b(
"lt640"), b("lt1024"), c(d, "rowHeight"), c(d,
"maxRowHeight"), d.maxRowHeight > 0 && d.maxRowHeight <
d.rowHeight && (d.maxRowHeight = d.rowHeight), c(d,
"margins"), "nojustify" !== d.lastRow && "justify" !==
d.lastRow && "hide" !== d.lastRow) throw 'lastRow must be "nojustify", "justify" or "hide"';
if (c(d, "justifyThreshold"), d.justifyThreshold < 0 || d.justifyThreshold >
1) throw "justifyThreshold must be in the interval [0,1]";
if ("boolean" != typeof d.cssAnimation) throw "cssAnimation must be a boolean";
if (c(d.captionSettings, "animationDuration"), c(d,
"imagesAnimationDuration"), c(d.captionSettings,
"visibleOpacity"), d.captionSettings.visibleOpacity <
0 || d.captionSettings.visibleOpacity > 1) throw "captionSettings.visibleOpacity must be in the interval [0, 1]";
if (c(d.captionSettings, "nonVisibleOpacity"), d.captionSettings
.visibleOpacity < 0 || d.captionSettings.visibleOpacity >
1) throw "captionSettings.nonVisibleOpacity must be in the interval [0, 1]";
if ("boolean" != typeof d.fixedHeight) throw "fixedHeight must be a boolean";
if ("boolean" != typeof d.captions) throw "captions must be a boolean";
if (c(d, "refreshTime"), "boolean" != typeof d.randomize)
throw "randomize must be a boolean"
}
var w = {
sizeRangeSuffixes: {
lt100: "_t",
lt240: "_m",
lt320: "_n",
lt500: "",
lt640: "_z",
lt1024: "_b"
},
rowHeight: 120,
maxRowHeight: 0,
margins: 1,
lastRow: "nojustify",
justifyThreshold: .75,
fixedHeight: !1,
waitThumbnailsLoad: !0,
captions: !0,
cssAnimation: !1,
imagesAnimationDuration: 500,
captionSettings: {
animationDuration: 500,
visibleOpacity: .7,
nonVisibleOpacity: 0
},
rel: null,
target: null,
extension: /\.[^.\\/]+$/,
refreshTime: 100,
randomize: !1
};
return this.each(function(c, d) {
var e = a(d);
e.addClass("justified-gallery");
var f = e.data("jg.context");
if ("undefined" == typeof f) {
if ("undefined" != typeof b && null !== b &&
"object" != typeof b) throw "The argument must be an object";
var g = a(
'<div class="spinner"><span></span><span></span><span></span></div>'
);
f = {
settings: a.extend({}, w, b),
imgAnalyzerTimeout: null,
entries: null,
buildingRow: {
entriesBuff: [],
width: 0,
aspectRatio: 0
},
lastAnalyzedIndex: -1,
"yield": {
every: 2,
flushed: 0
},
offY: 0,
spinner: {
active: !1,
phase: 0,
timeslot: 150,
$el: g,
$points: g.find("span"),
intervalId: null
},
checkWidthIntervalId: null,
galleryWidth: e.width(),
$gallery: e
}, e.data("jg.context", f)
} else if ("norewind" === b)
for (var h = 0; h < f.buildingRow.entriesBuff.length; h++)
k(f.buildingRow.entriesBuff[h], f);
else f.settings = a.extend({}, f.settings, b), n(f); if (
v(f), f.entries = e.find("> a, > div:not(.spinner)")
.toArray(), 0 !== f.entries.length) {
f.settings.randomize && (f.entries.sort(function() {
return 2 * Math.random() - 1
}), a.each(f.entries, function() {
a(this).appendTo(e)
}));
var i = !1;
a.each(f.entries, function(b, c) {
var d = a(c),
g = d.find("img");
if (g.data("jg.loaded") !== !0 &&
"skipped" !== g.data("jg.loaded")) {
null !== f.settings.rel && d.attr(
"rel", f.settings.rel),
null !== f.settings.target && d
.attr("target", f.settings.target);
var h = "undefined" != typeof g.data(
"safe-src") ? g.data(
"safe-src") : g.attr("src");
g.data("jg.originalSrc", h), g.attr(
"src", h);
var j = parseInt(g.attr("width"),
10),
k = parseInt(g.attr("height"),
10);
if (f.settings.waitThumbnailsLoad !==
!0 && !isNaN(j) && !isNaN(k))
return g.data("jg.imgw", j), g.data(
"jg.imgh", k), g.data(
"jg.loaded", "skipped"),
t(f, !1), !0;
g.data("jg.loaded", !1), i = !0, f.spinner
.active === !1 && (f.spinner.active = !
0, e.append(f.spinner.$el),
e.height(f.offY + f.spinner
.$el.innerHeight()), q(
f.spinner));
var l = new Image,
m = a(l);
m.one("load", function() {
g.off("load error"), g.data(
"jg.imgw", l.width
), g.data("jg.imgh",
l.height), g.data(
"jg.loaded", !0
), t(f, !1)
}), m.one("error", function() {
g.off("load error"), g.data(
"jg.loaded",
"error"), t(f, !
1)
}), l.src = h
}
}), i || t(f, !1), p(f)
}
})
}
}(jQuery);