So I use jQuery UI sortable plugin to sort photos in a small gallery.
$(function() {
$("#area").sortable({
items: '.sort-wrapper',
cursor: "move",
handle: ".photo-handler",
opacity: 0.5,
scroll: true,
scrollSensitivity: 100,
scrollSpeed: 5,
revert: 100,
tolerance: "pointer",
update : function () {
var order = $('#area').sortable('serialize');
$.ajax({
type : 'POST',
url : '/file.php',
data : order
});
}
}).disableSelection();
On the same page I dynamically add and remove photos. PHP script returns HTML code with div's with image links and buttons "remove" and "move" (sortable handler).
Example:
<div class="sort-wrapper">
<img src="photo001m.jpg" alt="">
<button type="button" class="remove-this-photo">Remove</button>
<button type="button" class="photo-handler">Move</button>
</div>
The problem is sortable stops working when I add new files or remove a file(s) from #area. I've been looking for solution, have found sortable('refresh') method, but it's not working for me.
The script which adds new photos in the #area is quite standard. I use $.ajax({}) and .done, .fail, .always methods.
I managed to use sortable('destroy') method when starting uploading new files and do something like this after uploading is finished:
.always(function() {
$("#area").sortable();
});
The code above makes the #area sortable again, but I must copy all the settings again to configure it my way.
How to bind sortable to make it work after dynamic content is loaded or how to store all the settings outside sortable() and be able to use it again on the same page?
If you add new content to the sortable element you'll need to refresh the initialised instance. To do that, call the refresh option, like this:
.always(function() {
$("#area").sortable('refresh');
});
Using fancybox2 and try to open YouTube video when click on div
<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>
$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
var thisElement = $(el[index]);
$.extend(this, {
href: thisElement.data("href")
});
}
});
But its dosent work, please help.
jsfiddle
Well, I don't know why you are complicating this fancybox thing like this,
Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :
when you use fancybox, just start it like this :
//event function(){
$('.vid').click(function(){
$.fancybox({
//settings
'type' : 'iframe',
'width' : 640,
'height' : 480,
//You don't need your thisElement var, see below :
'href' : $(this).data('href')
});
});
and put your settings into it,
here is a starting point for you, now just customize it to make it better for your needs :
http://jsfiddle.net/rtp7dntc/9/
Hope it helps!
To make things much simpler you could use the special data-fancybox attributes on your div like
<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>
Then use a script as simple as this
jQuery(document).ready(function ($) {
$('.vid').fancybox();
}); // ready
See JSFIDDLE
NOTE:
The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.
Im trying to work out the way to find the source of the current slide using JQuery cycle. I will be taking the source and using it to match the background image of another div using the 'after' method, it will change with each slide. This is what I have so far, all I need is to correct the var slideURL:
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL = currSlide.content.find('img').attr('src');
Thanks in advance!
you can get the current source like this
$('.home-slider').cycle({ pager: '.slider-pager', pause: '1', after: onSlideAfter });
function onSlideAfter() {
var slideURL =this.src;
}
http://jsfiddle.net/dWstA/
I'm experimenting with jquery live preview plugin wich shows preview of websites on hover in tooltip. You can check out the plug in here: https://github.com/alanphoon/jquery-live-preview
I was wondering if it's possible to set up that plug in to be activated on click of button instead of default hover function?
I'm trying to set this up here but I did not succeeded: http://jsfiddle.net/dzorz/YARYp/
first one is default link on hover and second one is button on which I wanna apply this plug in but on click.
I've tried .on("click",function... and .click but it failed..
code looks like this:
html:
Hover over to preview, click to link!
<br />
<button class="clickpreview">Preview</button>
script:
$(document).ready(function() {
$(".livepreview").livePreview({
viewWidth: 400,
viewHeight: 300,
});
});
any suggestion or help is welcome
Thank you
Is this what you are looking for
$(document).ready(function() {
$(".livepreview").livePreview({
viewWidth: 400,
viewHeight: 300,
});
$("#btn").click(function(){
$("#link").trigger("mouseenter");
});
});
FIDDLE
Use .trigger('mouseover');
$('.clickpreview').on('click', function (e) {
$('.livepreview').trigger('mouseover');
});
DEMO
I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?
jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>
For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.
If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.
There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();
none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)
The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.
Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});
Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api
I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);
Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;