We Keep Coding

Can't change css style with JS

<script>
var animate = function (element, target, callback) {
clearInterval(element.timer);
element.timer = setInterval(function () {
var step = (target - element.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
element.style.left = element.offsetLeft + step + 'px';
// console.log(element.offsetLeft);
if (element.offsetLeft == target) {
clearInterval(element.timer);
callback && callback();
}
}, 20)
};
window.addEventListener('load', function () {
var ul = document.querySelector('.local-nav');
console.log(ul);
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var ul2 = document.querySelector('.subnav-entry ul');
console.log(ul2);
for (var i = 0; i < ul2.children.length; i++) {
console.log(ul2.children[i].children[0].children[0]);
ul2.children[i].children[0].children[0].style.backgroundPosition = '0 ' + -i * 32 + 'px';
}
var focus_ul = document.querySelector('.focus ul');
var ol = document.querySelector('.focus ol');
var count = 0;
var focus_timer = setInterval(function () {
if (count == 2) {
animate(focus_ul, focus_ul.offsetLeft - 375);
// console.log('i run');
// console.log(focus_ul.offsetLeft + ' ' + count);
// focus_ul.style.left = focus_ul.offsetLeft + 375 * 2 + 'px';
focus_ul.style.left = 0 + 'px'; // Here is my problem
console.log(focus_ul);
console.log(focus_ul.offsetLeft + ' ' + count);
}
else {
console.log('before animation ' + focus_ul.offsetLeft + ' ' + count);
animate(focus_ul, focus_ul.offsetLeft - 375);
console.log(focus_ul.offsetLeft + ' ' + count);
}
// focus_ul.style.left = focus_ul.offsetLeft + 375 + 'px';
count++;
count = count % 3;
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[count].className = 'current-choice';
console.log('after a round ' + focus_ul.offsetLeft + ' ' + count);
}, 2500)
})
</script>
I meant to do a photo show that can play automaticly, like a Carousel or swiper, The 375px means that the screen is 375px wide, according to the code, when comming to the last photo, as the animation end, it should change back to the initial one which style.left == 0px, but 0px only occur a small while, next time it would be -1125px, -1500px and so on, I'm confused why i set style.left to 0 but fruitless. I'm new in front end ,thanks helping

You can use more of CSS (and less JavaScript) for this animation.
Declare two separate CSS class definitions for focus_ul. Use JavaScript to change the className of focus_ul.
Use CSS transition for animation of CSS offset-left property.
See: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
Write that custom className instead :hover in above example.

JSON Parse issue in React-Native

I'm so lost.
I keep getting this error:
"SAVED SCREEN NETWORK ERROR: , [SyntaxError: JSON Parse error: Unrecognized token '<']
at node_modules/color-string/index.js:90:16 in cs.get.rgb" (Line 90 is right below my console.log in the code down below)
This part:
console.log(match)
if (match[4]) {
if (match[5]) {
rgb[3] = parseFloat(match[4]) * 0.01;
} else {
rgb[3] = parseFloat(match[4]);
}
}
} else if (match = string.match(per)) {
for (i = 0; i < 3; i++) {
rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
}
But when I check the node_modules, I can't understand at all where its even using JSON. I console logged the match and all I'm getting is this:
Array [
"rgb(28, 28, 30)",
"28",
"28",
"30",
undefined,
undefined,
]
I literally don't know what to do anymore, so I'm hoping someone more experienced can help me out on this.
/* MIT license */
var colorNames = require('color-name');
var swizzle = require('simple-swizzle');
var hasOwnProperty = Object.hasOwnProperty;
var reverseNames = {};
// create a list of reverse color names
for (var name in colorNames) {
if (hasOwnProperty.call(colorNames, name)) {
reverseNames[colorNames[name]] = name;
}
}
var cs = module.exports = {
to: {},
get: {}
};
cs.get = function (string) {
var prefix = string.substring(0, 3).toLowerCase();
var val;
var model;
switch (prefix) {
case 'hsl':
val = cs.get.hsl(string);
model = 'hsl';
break;
case 'hwb':
val = cs.get.hwb(string);
model = 'hwb';
break;
default:
val = cs.get.rgb(string);
model = 'rgb';
break;
}
if (!val) {
return null;
}
return {model: model, value: val};
};
cs.get.rgb = function (string) {
if (!string) {
return null;
}
var abbr = /^#([a-f0-9]{3,4})$/i;
var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
var keyword = /^(\w+)$/;
var rgb = [0, 0, 0, 1];
var match;
var i;
var hexAlpha;
if (match = string.match(hex)) {
hexAlpha = match[2];
match = match[1];
for (i = 0; i < 3; i++) {
// https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
var i2 = i * 2;
rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
}
if (hexAlpha) {
rgb[3] = parseInt(hexAlpha, 16) / 255;
}
} else if (match = string.match(abbr)) {
match = match[1];
hexAlpha = match[3];
for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i] + match[i], 16);
}
if (hexAlpha) {
rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
}
} else if (match = string.match(rgba)) {
for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i + 1], 0);
}
console.log(match)
if (match[4]) {
if (match[5]) {
rgb[3] = parseFloat(match[4]) * 0.01;
} else {
rgb[3] = parseFloat(match[4]);
}
}
} else if (match = string.match(per)) {
for (i = 0; i < 3; i++) {
rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
}
if (match[4]) {
if (match[5]) {
rgb[3] = parseFloat(match[4]) * 0.01;
} else {
rgb[3] = parseFloat(match[4]);
}
}
} else if (match = string.match(keyword)) {
if (match[1] === 'transparent') {
return [0, 0, 0, 0];
}
if (!hasOwnProperty.call(colorNames, match[1])) {
return null;
}
rgb = colorNames[match[1]];
rgb[3] = 1;
return rgb;
} else {
return null;
}
for (i = 0; i < 3; i++) {
rgb[i] = clamp(rgb[i], 0, 255);
}
rgb[3] = clamp(rgb[3], 0, 1);
return rgb;
};
cs.get.hsl = function (string) {
if (!string) {
return null;
}
var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
var match = string.match(hsl);
if (match) {
var alpha = parseFloat(match[4]);
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
var s = clamp(parseFloat(match[2]), 0, 100);
var l = clamp(parseFloat(match[3]), 0, 100);
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
return [h, s, l, a];
}
return null;
};
cs.get.hwb = function (string) {
if (!string) {
return null;
}
var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
var match = string.match(hwb);
if (match) {
var alpha = parseFloat(match[4]);
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
var w = clamp(parseFloat(match[2]), 0, 100);
var b = clamp(parseFloat(match[3]), 0, 100);
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
return [h, w, b, a];
}
return null;
};
cs.to.hex = function () {
var rgba = swizzle(arguments);
return (
'#' +
hexDouble(rgba[0]) +
hexDouble(rgba[1]) +
hexDouble(rgba[2]) +
(rgba[3] < 1
? (hexDouble(Math.round(rgba[3] * 255)))
: '')
);
};
cs.to.rgb = function () {
var rgba = swizzle(arguments);
return rgba.length < 4 || rgba[3] === 1
? 'rgb(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ')'
: 'rgba(' + Math.round(rgba[0]) + ', ' + Math.round(rgba[1]) + ', ' + Math.round(rgba[2]) + ', ' + rgba[3] + ')';
};
cs.to.rgb.percent = function () {
var rgba = swizzle(arguments);
var r = Math.round(rgba[0] / 255 * 100);
var g = Math.round(rgba[1] / 255 * 100);
var b = Math.round(rgba[2] / 255 * 100);
return rgba.length < 4 || rgba[3] === 1
? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)'
: 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
};
cs.to.hsl = function () {
var hsla = swizzle(arguments);
return hsla.length < 4 || hsla[3] === 1
? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)'
: 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
};
// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
// (hwb have alpha optional & 1 is default value)
cs.to.hwb = function () {
var hwba = swizzle(arguments);
var a = '';
if (hwba.length >= 4 && hwba[3] !== 1) {
a = ', ' + hwba[3];
}
return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
};
cs.to.keyword = function (rgb) {
return reverseNames[rgb.slice(0, 3)];
};
// helpers
function clamp(num, min, max) {
return Math.min(Math.max(min, num), max);
}
function hexDouble(num) {
var str = Math.round(num).toString(16).toUpperCase();
return (str.length < 2) ? '0' + str : str;
}

How to stop infinite loop in subtle-slidershow.js?

how can I stop the infinite loop of the following Ken-Burns-Slider-script? I have 3 pictures and I would like to stop the slider after animation of the third picture. Try with stop() of slideRefresh did not work (or my coding was bad).
The full code of the script can be seen on GitHub. Thanks for your help.
(function($){
$.fn.slideshow = function(options){
var slides = $(this);
var settings = $.extend({
randomize: true,
slideDuration: 6000,
fadeDuration: 1000,
animate: true,
slideElementClass: 'slide',
slideshowId: 'slideshow'
}, options);
}
$('<div id="' + settings.slideshowId + '"></div>').insertBefore(slides);
var slideshow = $('#' + settings.slideshowId);
var slideTimeDelta = 0;
var resumeStartTime = 0;
var resumeTimer;
if(settings.animate == true){
var cssAnimationDuration = settings.slideDuration + settings.fadeDuration;
}else{
slides.find('.' + settings.slideElementClass + ' span.animate').removeClass('animate');
var cssAnimationDuration = 0;
}
console.log('Slideshow initialized.');
slides.find('.' + settings.slideElementClass + ':first span.animate').addClass('active').css('animation-duration', cssAnimationDuration + 'ms')
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var currentSlideStartTime = Date.now();
// Start interval loop
slidesInterval = setInterval(slideRefresh, settings.slideDuration);
console.log('Slideshow started.');
if(settings.pauseOnTabBlur == true){
$(window).focus(function() {
console.log('Window gained focus.');
if (paused == true) {
console.log('Resuming slideshow.');
resumeStartTime = Date.now();
paused = false;
$('#' + settings.slideshowId + ' span.active:last').removeClass('paused');
resumeTimer = setTimeout(function(){
slideTimeDelta = 0;
slideRefresh();
slidesInterval = setInterval(slideRefresh, settings.slideDuration);
}, settings.slideDuration - slideTimeDelta);
}
}).blur(function() {
paused = true;
console.log('Window lost focus, slideshow paused.');
if(slideTimeDelta != 0){
var timeSinceLastPause = Date.now() - resumeStartTime;
slideTimeDelta = slideTimeDelta + timeSinceLastPause;
console.log('Time since last pause within this slide: ' + timeSinceLastPause + ' ms');
}else{
slideTimeDelta = Date.now() - currentSlideStartTime;
}
console.log('Current slide at ' + slideTimeDelta + ' ms.');
$('#' + settings.slideshowId + ' span.active:first').addClass('paused');
clearInterval(slidesInterval);
clearTimeout(resumeTimer);
});
}
function slideRefresh() {
console.log('Slide refresh triggered.');
currentSlideStartTime = Date.now();
var slideshowDOM = slideshow[0];
if(slideshowDOM.children.length == 0) {
console.log('There are no slides in the slideshow.');
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
}else{
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var slideElement = '#' + settings.slideshowId + ' .' + settings.slideElementClass;
$(slideElement + ':first span.animate').addClass('active').css('animation-duration', cssAnimationDuration + 'ms');
$(slideElement + ':last').fadeOut(settings.fadeDuration, function(){
$(slideElement + ':last span.animate').removeClass('active').css('animation-duration', '0ms');
$(slideElement + ':last').appendTo(slides);
slides.find('.' + settings.slideElementClass).show(0);
});
}
}
};
}( jQuery ));

Error : is not a function. How can I fix it?

This is my lift programm. But I have error.
var person = {
name: "Roman",
position: 2,
goal: 9
};
var lift = {
getPosition : function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
} ()};
console.log("Ok " + person.name + "! You are at " + person.position + " floor");
console.log("Lift is at " + lift.getPosition() + " floor");
Error lift.getPosition is not a function.
How can I fix it??

you code looks broken:
var lift = {
getPosition : function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
} ()};
it seems this should be
var lift = {
getPosition : function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
}
};

When you declared getPosition you assigned this property a self invoked anonymous function. (The () at the end, self invokes it)
var lift = {
getPosition: function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
}()
};
You can remove them () and call the method like you did "lift.getPosition()":
var lift = {
getPosition: function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
}
};
console.log("Lift is at " + lift.getPosition() + " floor");
or leave them and just call the property without the () "lift.getPosition":
var lift = {
getPosition: function() {
var x = Math.floor((Math.random() * 10) + 1);
return x;
}()
};
console.log("Lift is at " + lift.getPosition + " floor");
But that would return the same value every time you use it, because it is only executed once. It really depends on what you are trying to accomplish.

Accessing a changed DOM element

Is there a way to access a JS changed DOM element? I have an image box that changes based on changing the thumbnail using JS/JQ.
I have a second javascript which is a loupe that magnifies the image. However it is only magnifying the original src link, the original src inside the div, and not the changed src link.
In the debugger I can see the image change in div element but the loupe script cannot see it. It seems the loupe script is just accessing the original src of the div element.
Both JS/JQ scripts were written by different people and I'm trying to get them to work nicely together.
I'm new to JS so I'm not sure if this is possible.
Here is the HTML that is being changed (the gallery JS changes the src element):
<img class="picture-slides-image" src="artifactImages/bowl_fragment_16134_04E.jpg" alt=""/ >
Here is the JS in the HTML that sets the loupe going:
<script>
$('.picture-slides-image').ClassyLoupe({
maxSize: 600,
size: 300,
minSize: 200,
loupeToggleSpeed: 'fast'
});
</script>
Here is the JS for the loupe:
(function($) {
var id = 0;
jQuery.fn.ClassyLoupe = function(a) {
id++;
if (this.length > 1) {
return this.each(function() {
$(this).ClassyLoupe(a);
}), this;
}
var a = $.extend({
trigger: 'mouseenter',
shape: 'circle',
roundedCorners: 10,
loupeToggleSpeed: 'medium',
loupeToggleEasing: 'linear',
size: 200,
minSize: 150,
maxSize: 250,
glossy: true,
shadow: true,
resize: true,
sizeSnap: 10,
resizeAnimationSpeed: 'medium',
resizeAnimationEasing: 'easeOutBack',
canZoom: true,
zoomKey: 90,
zoom: 100,
minZoom: 50,
maxZoom: 200,
zoomSnap: 5,
zoomAnimationSpeed: 'medium',
zoomAnimationEasing: 'easeOutBack',
overlay: true,
overlayOpacity: 0.5,
overlayEffectSpeed: 'slow',
overlayEffectEasing: 'easeOutBack',
overlayClassName: ''
}, a || {}), j = jQuery(this), c = 'classyloupe-' + id, t = 'classyloupe_overlay-' + id, h = a.size, i, q = null, u = 0, v = 0, x = 0, y = 0, r = 0, s = 0, w = false, p = false, k = a.zoom, n = 0, o = 0, e, z = false;
return this.each(function() {
function A() {
var d = h - 2 * $('#' + c + ' .lglossy').css('marginTop'), e = h / 2, g = 0, f = 0;
a.shape === 'circle' ? f = g = e : a.shape === 'rounded' && (g = parseInt($('#' + c).css('border-top-width')), f = g = a.roundedCorners - g);
$('#' + c + ' .glossy').stop().animate({
width: d + 'px',
height: e + 'px',
'-webkit-border-top-left-radius': g + 'px',
'-webkit-border-top-right-radius': f + 'px',
'-moz-border-radius-topleft': g + 'px',
'-moz-border-radius-topright': f + 'px',
'border-top-left-radius': g + 'px',
'border-top-right-radius': f + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed
});
}
function B(d, e) {
if (w && a.canZoom) {
if (!(k + a.zoomSnap * d > a.maxZoom || k + a.zoomSnap * d < a.minZoom)) {
k += a.zoomSnap * d;
r += Math.round(x * a.zoomSnap / 100) * d;
s += Math.round(y * a.zoomSnap / 100) * d;
var g = e.pageY - this.offsetTop;
n = Math.round(r / u * (e.pageX - this.offsetLeft)) * -1 + h / 2;
o = Math.round(s / v * g) * -1 + h / 2;
$('#' + c).animate({
'background-position': n + 'px ' + o + 'px',
'background-size': r + 'px ' + s + 'px'
}, {
queue: false,
easing: a.zoomAnimationEasing,
duration: a.zoomAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
});
}
}
else if (a.resize && !w && (g = d * a.sizeSnap, !(h + g > a.maxSize || h + g < a.minSize))) {
h += g;
var f = 0, m = Math.round($('#' + c).offset().left - g), l = Math.round($('#' + c).offset().top - g);
n += g;
o += g;
$('#' + c).stop();
a.shape === 'circle' ? (f = h / 2, $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'-webkit-border-top-left-radius': f + 'px',
'-webkit-border-top-right-radius': f + 'px',
'-webkit-border-bottom-left-radius': f + 'px',
'-webkit-border-bottom-right-radius': f + 'px',
'-moz-border-radius-topleft': f + 'px',
'-moz-border-radius-topright': f + 'px',
'-moz-border-radius-bottomleft': f + 'px',
'-moz-border-radius-bottomright': f + 'px',
'border-top-left-radius': f + 'px',
'border-top-right-radius': f + 'px',
'border-bottom-left-radius': f + 'px',
'border-bottom-right-radius': f + 'px',
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
})) : a.shape === 'rounded' ? $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'-webkit-border-radius': a.roundedCorners,
'-moz-border-radius': a.roundedCorners,
'border-radius': a.roundedCorners,
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
}) : a.shape === 'square' && $('#' + c).animate({
width: h + 'px',
height: h + 'px',
'background-position': n + 'px ' + o + 'px',
left: m + 'px',
top: l + 'px'
}, {
queue: false,
easing: a.resizeAnimationEasing,
duration: a.resizeAnimationSpeed,
complete: function() {
i = $('#' + c).outerWidth();
var a = new jQuery.Event('mousemove', {
pageX: m + i / 2,
pageY: l + i / 2
});
j.trigger(a);
}
});
a.glossy && A();
}
}
(function() {
j.is("a") ? (q = j.attr('href'), e = j.find('img')) : (j.is('img') || j.is('input[type="image"]')) && (q = j.attr('src'), e = j);
u = e.width();
v = e.height();
$('body').append('<div class="classyloupe" id="' + c + '"></div>');
var d = new Image;
d.onload = function() {
x = this.width;
y = this.height;
r = Math.round(x * k / 100);
s = Math.round(y * k / 100);
var d = h / 2;
$('#' + c).css({
width: h + 'px',
height: h + 'px',
'background-image': 'url(' + q + ')',
'background-size': r + 'px ' + s + 'px'
});
a.shape === 'circle' ? $('#' + c).css({
'-webkit-border-radius': d + 'px',
'-moz-border-radius': d + 'px',
'border-radius': d + 'px'
}) : a.shape === 'rounded' && $('#' + c).css({
'-webkit-border-radius': a.roundedCorners,
'-moz-border-radius': a.roundedCorners,
'border-radius': a.roundedCorners + 'px'
});
i = $('#' + c).outerWidth();
a.glossy && $('#' + c).append('<div class="lglossy"></div>');
a.overlay && ($('body').append("<div class='loverlay " + a.overlayClassName + "' id='" + t + "'></div>"), $('#' + t).css({
top: e.offset().top + 'px',
left: e.offset().left + 'px',
width: e.outerWidth() + 'px',
height: e.outerHeight() + 'px'
}));
a.shadow && $('#' + c).addClass('lshadow');
};
d.src = q;
}(), (a.resize || a.canZoom) && !z && $.event.special.mousewheel && $('#' + c).bind('mousewheel', function(a, b) {
B(b, a);
return false;
}), e.bind(a.trigger, function(d) {
p ? ($('#' + c).fadeOut(a.loupeToggleSpeed, a.loupeToggleEasing), p = false, a.overlay && $('#' + t).fadeOut(a.overlayEffectSpeed, a.overlayEffectEasing)) : ($('#' + c).fadeIn(a.loupeToggleSpeed, a.loupeToggleEasing), p = true, a.overlay && $('#' + t).fadeTo(a.overlayEffectSpeed, a.overlayOpacity, a.overlayEffectEasing), A());
if (d.type === 'click') {
return d.preventDefault ? d.preventDefault() : d.returnValue = false, false;
}
}), $('#' + c).bind('click', function() {
e.trigger('click');
}), $(document).bind('mousemove', function(d) {
if (!p) {
return true;
}
var j = parseInt(e.css('border-left-width')) + parseInt(e.css('padding-left')),
g = parseInt(e.css('border-top-width')) + parseInt(e.css('padding-top')),
f = parseInt(e.css('border-right-width')) + parseInt(e.css('padding-right')),
m = parseInt(e.css('border-bottom-width')) + parseInt(e.css('padding-bottom')),
l = d.pageX - e.offset().left - j,
k = d.pageY - e.offset().top - g,
q = Math.round(d.pageX - i / 2),
d = Math.round(d.pageY - i / 2);
n = Math.round(r / u * l) * -1 + h / 2;
o = Math.round(s / v * k) * -1 + h / 2;
$('#' + c).css({
'background-position': n + 'px ' + o + 'px'
});
$('#' + c).css({
left: q + 'px',
top: d + 'px'
});
if (l < -j || k < -g || l > u + f || k > v + m) {
$('#' + c).fadeOut(a.loupeToggleSpeed), p = false, a.overlay && $('#' + t).fadeOut(a.overlayEffectSpeed);
}
}), $(document).keyup(function(event) {
if (event.which == a.zoomKey && p) {
return w = false, event.preventDefault ? event.preventDefault() : event.returnValue = false, false;
}
}).keydown(function(event) {
if (event.which == a.zoomKey && p) {
return w = true, event.preventDefault ? event.preventDefault() : event.returnValue = false, false;
}
}));
});
};
})(jQuery);
Here is the JS for the gallery:
jQuery.PictureSlides = function () {
var useMSFilter = false,
slideshows = [],
set = function (settings) {
slideshows.push(settings);
},
init = function () {
var counter = 0;
$(".picture-slides-container").each(function () {
var elm = $(this),
// Element references
settings = slideshows[counter++],
mainImage = elm.find("." + settings.mainImageClass),
mainImageFailedToLoad = elm.find("." + settings.mainImageFailedToLoadClass),
imageLink = elm.find("." + settings.imageLinkClass),
fadeContainer = elm.find("." + settings.fadeContainerClass),
imageTextContainer = elm.find("." + settings.imageTextContainerClass),
previousLink = elm.find("." + settings.previousLinkClass),
nextLink = elm.find("." + settings.nextLinkClass),
imageCounter = elm.find("." + settings.imageCounterClass),
startSlideShowLink = elm.find("." + settings.startSlideShowClass),
stopSlideShowLink = elm.find("." + settings.stopSlideShowClass),
thumbnailContainer = elm.find("." + settings.thumbnailContainerClass),
thumbnailEvent = settings.thumbnailActivationEvent,
thumbnailLinks,
dimBackgroundOverlay = $("." + settings.dimBackgroundOverlayClass),
// General image settings
usePreloading = settings.usePreloading,
useAltAsTooltip = settings.useAltAsTooltip,
useTextAsTooltip = settings.useTextAsTooltip,
images = settings.images,
startIndex = (settings.startIndex > 0)? (settings.startIndex - 1) : settings.startIndex,
imageIndex = startIndex,
currentImageIndex = imageIndex,
startSlideShowFromBeginning = settings.startSlideShowFromBeginning,
dimBackgroundAtLoad = settings.dimBackgroundAtLoad,
// General fade settings
useFadingIn = settings.useFadingIn,
useFadingOut = settings.useFadingOut,
useFadeWhenNotSlideshow = settings.useFadeWhenNotSlideshow,
useFadeForSlideshow = settings.useFadeForSlideshow,
useDimBackgroundForSlideshow = settings.useDimBackgroundForSlideshow,
loopSlideshow = settings.loopSlideshow,
fadeTime = settings.fadeTime,
timeForSlideInSlideshow = settings.timeForSlideInSlideshow,
startSlideshowAtLoad = settings.startSlideshowAtLoad,
slideshowPlaying = false,
timer,
// Sets main image
setImage = function () {
// Set main image values
var imageItem = images[imageIndex];
mainImage.attr({
src : imageItem.image,
alt : imageItem.alt
});
// If the alt text should be used as the tooltip
if (useAltAsTooltip) {
mainImage.attr("title", imageItem.alt);
}
// If the image text should be used as the tooltip
if (useTextAsTooltip) {
mainImage.attr("title", imageItem.text);
}
// Set image text
if (imageTextContainer.length > 0) {
imageTextContainer.text(imageItem.text);
}
// Set image link
if (imageLink.length > 0) {
var url = imageItem.url;
if (typeof url !== "undefined" && url.length > 0) {
imageLink.attr("href", imageItem.url);
}
else {
imageLink.removeAttr("href");
}
}
// Set image counter values
if (imageCounter.length > 0) {
imageCounter.text((imageIndex + 1) + "/" + (images.length));
}
if (!loopSlideshow) {
// Enabling/disabling previous link
if (imageIndex === 0) {
previousLink.addClass("picture-slides-disabled");
}
else {
previousLink.removeClass("picture-slides-disabled");
}
// Enabling/disabling next link
if (imageIndex === (images.length - 1)) {
nextLink.addClass("picture-slides-disabled");
}
else {
nextLink.removeClass("picture-slides-disabled");
}
}
// Keeping a reference to the current image index
currentImageIndex = imageIndex;
// Adding/removing classes from thumbnail
if (thumbnailContainer[0]) {
thumbnailLinks.removeClass("picture-slides-selected-thumbnail");
$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
}
},
// Navigate to previous image
prev = function () {
if (imageIndex > 0 || loopSlideshow) {
if (imageIndex === 0) {
imageIndex = (images.length -1);
}
else {
imageIndex = --imageIndex;
}
if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
fadeContainer.stop();
fadeContainer.fadeTo(fadeTime, 0, function () {
setImage(imageIndex);
});
}
else {
if (useFadingIn && imageIndex !== currentImageIndex) {
fadeContainer.css("opacity", "0");
}
setImage(imageIndex);
}
}
},
// Navigate to next image
next = function (specifiedIndex) {
if (imageIndex < (images.length -1) || typeof specifiedIndex !== "undefined" || loopSlideshow) {
if (typeof specifiedIndex !== "undefined") {
imageIndex = specifiedIndex;
}
else if (imageIndex === (images.length-1)) {
imageIndex = 0;
}
else {
imageIndex = ++imageIndex;
}
if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
fadeContainer.stop();
fadeContainer.fadeTo(fadeTime, 0, function () {
setImage(imageIndex);
});
}
else {
if (useFadingIn && imageIndex !== currentImageIndex) {
fadeContainer.css("opacity", "0");
}
setImage(imageIndex);
}
}
else {
stopSlideshow();
}
},
// Start slideshow
startSlideshow = function () {
slideshowPlaying = true;
startSlideShowLink.hide();
stopSlideShowLink.show();
if (startSlideShowFromBeginning) {
next(0);
}
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
elm.addClass("picture-slides-dimmed-background");
dimBackgroundOverlay.show();
}
},
// Stop slideshow
stopSlideshow = function () {
clearTimeout(timer);
slideshowPlaying = false;
startSlideShowLink.show();
stopSlideShowLink.hide();
if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
elm.removeClass("picture-slides-dimmed-background");
dimBackgroundOverlay.hide();
}
};
// Fade in/show image when it has loaded
mainImage[0].onload = function () {
if (useFadingIn && (useFadeWhenNotSlideshow || slideshowPlaying)) {
fadeContainer.fadeTo(fadeTime, 1, function () {
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
});
}
else {
fadeContainer.css("opacity", "1");
fadeContainer.show();
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
}
mainImageFailedToLoad.hide();
};
mainImage[0].onerror = function () {
fadeContainer.css("opacity", "1");
mainImageFailedToLoad.show();
if (slideshowPlaying) {
clearTimeout(timer);
timer = setTimeout(function () {
next();
}, timeForSlideInSlideshow);
}
};
// Previous image click
previousLink.click(function (evt) {
prev();
return false;
});
// Next image click
nextLink.click(function (evt) {
next();
return false;
});
// Start slideshow click
startSlideShowLink.click(function () {
startSlideshow();
return false;
});
// Stop slideshow click
stopSlideShowLink.click(function () {
stopSlideshow();
return false;
});
// Shows navigation links and image counter
previousLink.show();
nextLink.show();
startSlideShowLink.show();
imageCounter.show();
// Stop slideshow click
stopSlideShowLink.click(function () {
stopSlideshow();
});
// Thumbnail references
if (thumbnailContainer[0]) {
thumbnailLinks = $(thumbnailContainer).find("a");
$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
for (var i=0, il=thumbnailLinks.length, thumbnailLink; i<il; i++) {
thumbnailLink = $(thumbnailLinks[i]);
thumbnailLink.data("linkIndex", i);
thumbnailLink.bind(thumbnailEvent, function (evt) {
next($(this).data("linkIndex"));
this.blur();
return false;
});
}
}
// Sets initial image
setImage();
// If play slideshow at load
if (startSlideshowAtLoad) {
startSlideshow();
}
if (dimBackgroundAtLoad) {
elm.addClass("picture-slides-dimmed-background");
dimBackgroundOverlay.show();
}
if (usePreloading) {
var imagePreLoadingContainer = $("<div />").appendTo(document.body).css("display", "none");
for (var j=0, jl=images.length, image; j<jl; j++) {
$('<img src="' + images[j].image + '" alt="" />').appendTo(imagePreLoadingContainer);
}
}
});
};
return {
set : set,
init : init
};
}();
$(document).ready(function () {
jQuery.PictureSlides.init();
});

Create a function that you can easily call to apply the classy loupe plugin:
function addLoupe()
{
$('.picture-slides-image').ClassyLoupe({
maxSize: 600,
size: 300,
minSize: 200,
loupeToggleSpeed: 'fast'
});
}
Then in the jQuery.PictureSlides file find the section for setImage, as the comments in the code suggests this sets the main image. At the end of the function, before the closing } call the function created addLoupe. This should reset the classy loupe on the new image.
---- edit
Digging through the PictureSlides code I see that there is an option to set the thumbnailActivationEvent. When I followed that to where it is set/used in the plugin I found where it is being bound. If you apply loupe at this point the new large image should be present and have the new class that you bind on picture-slides-image.
Try:
thumbnailLink.bind(thumbnailEvent, function (evt) {
next($(this).data("linkIndex"));
this.blur();
addLoupe(); // reset your loupe settings here.
return false;
});
If that doesn't work, I've got nothing else for you.