Fancybox and Zoom Effect with Zoom1 Pugin - javascript

Working with Fancybox version 1.3.4. Fancybox is working perfectly, I am trying to add the zooom Effect to Fancybox.
Till now i have been able to apply the effect to the image when clicked open in fancybox window. But that is half done, as when i close fancybox, the zoom effect still remains.
I load 5 images and on hover on each image, the top image gets changed. I want to apply the zooom effect on the image which shows when the mouse is moved on the small thumbnail and it shows in big screen. [Here i am unable to apply zooom, i am missing something, but what not sure]
This is my Try Till now:
<div class="CWproductThumbs">
<img class="CWthumb" src="cw4/images/product_thumb_details/012.jpg" alt="Digital HD Video Camera">
<img class="CWthumb" src="cw4/images/product_thumb_details/006.jpg" alt="Digital HD Video Camera">
</div>
Jquery code;
jQuery(document).ready(function(){
// set filename on any image element
var $setSrc = function(triggerEl,targetEl){
var triggerSrc = jQuery(triggerEl).attr('src');
var triggerIndex = triggerSrc.lastIndexOf("/") + 1;
var newFn = triggerSrc.substr(triggerIndex);
var targetSrc = jQuery(targetEl).attr('src');
var targetIndex = targetSrc.lastIndexOf("/") + 1;
var oldFn = targetSrc.substr(targetIndex);
var targetDir = targetSrc.replace(oldFn,'');
var newSrc = targetDir + newFn;
targetEl.attr('src',newSrc);
};
// set href on any link
var $setHref = function(triggerEl,targetEl){
var triggerHref = jQuery(triggerEl).attr('href');
var triggerIndex = triggerHref.lastIndexOf("/") + 1;
var newFn = triggerHref.substr(triggerIndex);
var targetHref = jQuery(targetEl).attr('href');
var targetIndex = targetHref.lastIndexOf("/") + 1;
var oldFn = targetHref.substr(targetIndex);
var targetDir = targetHref.replace(oldFn,'');
var newHref = targetDir + newFn;
targetEl.attr('href',newHref);
};
jQuery('img.CWthumb').hover(function(){
$setSrc(jQuery(this),jQuery('#CWproductImgMain'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105imgLink'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105zoomLink'));
});
jQuery('a.CWimageZoomLink').each(function(){
jQuery(this).fancybox({
'titlePosition': 'over',
'padding': 0,
'margin' : 0,
'overlayShow': true,
'showCloseButton': true,
'hideOnOverlayClick':true,
'hideOnContentClick': true,
'autoDimensions': true,
'centerOnScroll': true,
'showNavArrows':true,
'cyclic':true,
'onComplete' : function() {
jQuery('#fancybox-img').imagezoomsl({innerzoommagnifier: true,
classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
magnifierborder: "5px solid #F0F0F0",
zoomrange: [2, 8],
zoomstart: 4,
magnifiersize: [150, 150]})
}
});
jQuery('a.CWtriggerZoomLink').click(function(){
var zoomHref = jQuery(this).attr('href');
jQuery('a.CWimageZoomLink[href="' + zoomHref + '"]').trigger('click');
return false;
});
// fancybox - see http://fancybox.net/api for available options
});
});
Jquery Zooom Plugin used is;
www.zoomsl.tw1.ru

Related

Jquery Lightbox/Modal Difficulties doubles itself onclick

I am very new to jQuery and I have a problem with my Gallery Lightbox/Modal.
Each time I click on a thumbnail, the whole modal opens itself again and I don't know where exactly I have to set a reset.
I am pleased to hear your answers.
jQuery(function($) {
$('img').click(function() {
var image = $(this).attr("src");
var caption = $(this).attr("alt");
var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");
$(".thumbnails").css("zIndex", "100");
$(".thumbnails").css("display", "flex");
$('body').append(appear_image);
$('body').append(appear_caption);
});
});
function closeImage() {
$('#appear_image_div').remove();
$('#appear_image').remove();
$('#appear_caption').remove();
$(".thumbnails").css("display", "none");
};
Call close when you click the image so you remove any previously opened Gallery Lightbox/Modal
jQuery(function($) {
$('img').click(function() {
closeImage();
var image = $(this).attr("src");
var caption = $(this).attr("alt");
var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");
$(".thumbnails").css("zIndex", "100");
$(".thumbnails").css("display", "flex");
$('body').append(appear_image);
$('body').append(appear_caption);
});
});
function closeImage() {
$('#appear_image_div').remove();
$('#appear_image').remove();
$('#appear_caption').remove();
$(".thumbnails").css("display", "none");
};

Convert sprite image into CSS animation

I have an sprite image , I want to animate it , Below is the actual Animation.I coded by just copying code of some other website .It uses some Framework named motio 2.2 , But problem is it is not working in IOS.Below is the sample code and here is demo https://codepen.io/adjmpw/pen/OmxVNO
var blue_cirlce_anim = jQuery('#' + BLUE_CIRCLE_ID);
blue_cirlce_anim.css('cssText', 'display: block !important;');
var motioBC = new Motio(blue_cirlce_anim[0], {
fps: 60,
frames: 97,
vertical: true
});
motioBC.play();
https://codepen.io/adjmpw/pen/OmxVNO
I want to animate following images , Using Css or Javascript or jquery
http://www.humanverify.net/captchalocker/img/blue-circle-anim.png
http://www.humanverify.net/captchalocker/img/blue-circle-loading-anim.png
What I tried So far
var imgHeight = 2844;
var numImgs = 100;
var cont = 0;
var img = $('#container').find('img');
var animation = setInterval( moveSprite,100);
function moveSprite(){
img.css('margin-top', -1 * (cont*imgHeight));
cont++;
if(cont == numImgs){
clearInterval(animation);
}
}
http://jsfiddle.net/aTqGw/406/

Inside of left slider, and right side mouse wheel don't work in Firefox

In my code below, inside of left slider, and right side mouse wheel work in Chrome but don't work in Firefox. Can anyone see what's going on?
<script>
var bg_slider = jQuery('#slider').val();
var bg_va = jQuery('#nave_value').val();
var bg_d = parseInt(bg_va);
var button = jQuery('#btn_value').val();
var bg_c = parseInt(button);
var scall = jQuery('#bg_scall').val();
var bg_easy = parseInt(scall);
var space = jQuery('#spc_value').val();
jQuery(document).ready(function() {
var carousel = jQuery("#coverflow").flipster({
style: bg_slider,
nav: bg_d,
buttons: bg_c,
spacing: space,
scrollwheel:bg_easy,
});
});
var bg_a = jQuery('#bg_autoplay').val();
var iNum = parseInt(bg_a);
var bg_t = jQuery('#bg_show_title').val();
var title = parseInt(bg_t);
var bg_s = jQuery('#bg_show_navel').val();
var navel = parseInt(bg_s);
var bg_pl = jQuery('#bg_show_play').val();
var show = parseInt(bg_pl);
var html5lightbox_options = {
autoplay: iNum,
showtitle: title,
shownavigation: navel,
showplaybutton: show,
};
</script>
I use Flipster jQuery plugin v1.1.1

Javascript module pattern - what am I doing wrong?

A working version of this is here: http://est.pagodabox.com/client/svedka
I have the following function which I'm trying to convert into a module pattern, but when I try to use one of the function that I return at the bottom, for example:
est_project.closeContent($html);
I get an error that it's not a function. Is there something i'm doing wrong here?
Thanks!
var est_project = (function(){
// Setup functions
var flexDestroy,
cloneCurrent,
clonePosition,
switchSlide,
projectLayout,
contentHeight,
slidePos,
slideClick,
infoToggle,
closeContent;
// Destroy flexslider
flexDestroy = function($slider,$cleanSlider, $projBg) {
// Insert the clone of the un-initialized slide element, and remove the current flexslider
// Effectively "destroys" the current slider
var $curSlide = $slider.find('.flex-active-slide'),
// Get the zero based index of current slide
curSlideIndex = $curSlide.index() - 1,
curBg = $curSlide.find('img').attr('src'),
slideCount = $cleanSlider.data('count'),
i = 0,
$rearrange = $('');
// When you switch projects, the current slide should stay put
if(curSlideIndex !== 0 && slideCount > 1) {
// Cut from the current slide to the end, paste at the beginning
for(i = 0 ; i < slideCount; i += 1) {
if(curSlideIndex > i) {continue;}
$rearrange = $rearrange.add( $cleanSlider.find('li:eq(' + i + ')') );
}
$rearrange.remove();
$cleanSlider.find('li:first-child').before($rearrange)
$cleanSlider.css({'background-image' : 'url(' + curBg + ')'});
}
$slider.after($cleanSlider).remove();
clonePosition(slideheight);
};
return {
// Clone current
cloneCurrent: function($el) {
var $clean,
slideCount = $el.find('li').length;
$clean = $el.clone();
$clean.removeClass('project-current').find('div').removeClass('img-loading');
$clean.data('count',slideCount);
return $clean;
},
// Set the clone position, for when we add it to the DOM or resize the window
clonePosition: function(slideheight) {
var n = $cleanSlider.index(),
$myBg = $cleanSlider.find('div'),
myPosition = n * slideheight;
// Set the position of the inserted clone
$cleanSlider
.css({height: slideheight, top: myPosition, position : 'absolute'});
$myBg
.css({height: slideheight});
},
switchSlide: function($me, $slider) {
$('.project-current').removeClass('project-current');
$me.addClass('project-current');
// Get rid of current flexslider
flexDestroy($slider,$cleanSlider);
// Clone the unitialized slider so we can add it back in later when it gets destroyed
$cleanSlider = cloneCurrent($me);
$me.addClass('flexslider').flexslider({
animation: "slide",
animationSpeed: 500,
slideshow: false,
manualControls: '.dot-nav li a'
});
// After the flexslider initializes, slide the content
setTimeout(function(){
slidePos($me, $slidewrap, slideheight, $win);
},100);
},
// Custom "masonry" function, absolutely positions each project div according to the slide height
projectLayout: function(slideheight,$proj,$projBg) {
var n = 0;
$proj.each(function(){
var $me = $(this),
myPosition = n * slideheight;
// Set all the heights
$me
.css({top: myPosition, position : 'absolute'})
.add($projBg)
.css({height: slideheight});
n++;
});
},
// Set slide wrapper height to window height
contentHeight: function($win, $slidewrap) {
var winHeight = $win.height();
$slidewrap.css({height: winHeight});
},
// Set slide wrapper position to slide to the clicked slide, and set content position
slidePos: function($me, $slidewrap, slideheight, $win) {
var $contentText = $('.project-content .text'),
projNavHeight = Math.round( $win.height() * .1 ),
curIndex = $me.index(),
curTop = 0 - (curIndex * slideheight) + projNavHeight;
$slidewrap.css({transform: 'translate(0,' + curTop.toString() + 'px)'});
$('.corner-btn').add($contentText).css({'padding-top' : projNavHeight});
setTimeout(function(){
$slidewrap.removeClass('tr-none movin').addClass('tr-all');
$('.project').css({opacity: .4})
}, 100);
},
// Click a project, slide to it
slideClick: function($proj) {
$('.project').live('click',function(){
var $me = $(this),
myHref = $me.data('href'),
myTitle = $me.data('title'),
$slider = $('.flexslider'),
indexMy = $me.index(),
indexCur = $('.project-current').index(),
projDir;
$me.css({opacity: 1});
// Stop here if we click on the current project
if($me.hasClass('project-current')) {
return false;
}
History.pushState(null,myTitle,myHref);
});
},
// Hide and show content
infoToggle: function() {
// Open content
$('#corner-btn-info').on('click',function(){
$html.addClass('show-content');
if($('.project-content .text').height() <= $win.height()) {
$html.addClass('no-overflow');
}
$('.project-content-wrap').css({'z-index': 10});
});
// Close content
$('#corner-btn-close').live('click',function(){
closeContent($html);
});
},
closeContent: function($html) {
$html.removeClass('show-content');
setTimeout(function(){
$('.project-content-wrap').css({'z-index': -1});
$html.removeClass('no-overflow');
$('#classy').animate({scrollTop: 0})
},300);
}
};
});
The problem is that you're not executing the anonymous function, your code is the equivalent of:
var est_project = function() {};
You need to execute the function if you want it to return the functions defined in it.
Just replace the last line:
});
By:
}());
Or you can keep your code and call the closeContent function like this:
est_project().closeContent();
But I guess that's not what you want :-) You'd instantiate a new object everytime you call the est_project function.
At the start and end of your file just attach the object to window with the executed function and wrap whole function inside a self executing function. like this
(function(global) {
//your code goes here
global.est_project = est_project();
})(this)

jQuery-Cycle: how to change the transition effect on each new image

That's pretty much what I am trying to accomplish. To have each image appear with a different transition effect.
Can you please help me fix and figure out what's wrong with my code?
jQuery:
var url = 'http://www.mywebsite.com/';
var img_dir = '_img/slideshow/';
var fx =
[
'blindX',
'blindY',
'blindZ',
'cover',
'curtainX',
'curtainY',
'fade',
'fadeZoom',
'growX',
'growY',
'scrollUp',
'scrollDown',
'scrollLeft',
'scrollRight',
'scrollHorz',
'scrollVert',
'shuffle',
'slideX',
'slideY',
'toss',
'turnUp',
'turnDown',
'turnLeft',
'turnRight',
'uncover',
'wipe',
'zoom'
];
var index = 0;
$(function() {
var $slideshow = $('#slideshow');
// add slides to slideshow (images 2-3)
for (var i = 2; i < 13; i++)
$slideshow.append(
'<a href="' + url + img_dir + i+'.jpg" title="Slideshow">'+
//src="http://www.mywebsite.com/_img/slideshow/"
'<img src="' + url + img_dir + i+'.jpg" width="100" height="100" />'+
'</a>');
// start the slideshow
$slideshow.cycle(
{
if( index < fx.length ) { index++; }
else { index = 0; }
fx: fx[index],
timeout: 3000
});
});
To use all the effects it is quite easy:
http://jsfiddle.net/lucuma/tcRCj/14/
$('#slideshow').cycle({fx:'all'});​
Furthermore if you just want to specify certain ones:
$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade'});
And if you do NOT want to randomize the effect order (it will randomize by default):
$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade', randomizeEffects:0});

Categories

Resources