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");
};
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/
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
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)
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});