FancyBox & ImageLens - javascript

I'm trying to load an image using FancyBox and once the image is loaded it should display a magnifying glass when hovering over the image.
I'm using the following javascript file to display the magnifying glass:
http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html
My code is as follows:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition' : 'inside',
onComplete: function(){
alert("test");
$("#fancybox-img").imageLens();
}
});
I'm trying to load the imageLens using the "onComplete" method but nothing happens... does anyone know whats wrong with my code?
Thanks

You have to use Colorbox plugin (it's similar to fancybox):
$(".callbacks").colorbox({
onComplete:function(){$('.cboxPhoto').imageLens( {lensSize: 200 }); }
});

Related

Lights off and on in website background when playing video player on my website

I am trying to create a website where i can stream video and I'm planning to make a button to turn off and on the background website but not include the video. Can anyone help me with the javascript code? Thank you very much.
$(document).ready(function() {
$('.video').allofthelights({
'opacity': '0.7',
'delay_turn_on': '3000',
'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']",
'callback_turn_off': function() {
$("h1").addClass('light');
}
});
});
I am trying to use this code but i don't understand about the iframe and the html on how should i put it.
$(document).ready(function() {
$('.video').allofthelights({
'opacity': '0.7',
'delay_turn_on': '3000',
'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']",
'callback_turn_off': function() {
$("h1").addClass('light');
}
});
});
I am trying to use this code but i don't understand about the iframe and the html on how should i put it.

jQuery Mobile; twentytwenty plugin will only show up when the browser window is resized

I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?

Jquery live preview plugin on click

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

Loading new images via AJAX don't get same jQuery properies

I have a web page that loads pictures in a infinity scroll typ of way. Also I have a javascript that put a animation on the picture. The problem I'm facing is that the new images that are loaded will not get the animation properties.
First I have my Javascript code
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery('.scroll_container').scrollExtend(
{
'target': 'div#scroll_items',
'url': '/popular_data.php',
'newElementClass' : 'mosaic-block cover2',
'onSuccess' : ''
}
);
}
);
jQuery(function($){
$('.cover2').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top', //Vertical anchor position
hover_y : '40px' //Vertical position on hover
});
});
</script>
What I would like to do is that the variable OnSuccess should call the cover2 mosaic function. But my Javascript knowledge is not that good. But i think this would solve the problem.
The plugins I'm using is:
http://buildinternet.com/project/mosaic/ and
http://contextllc.com/tools/jQuery-infinite-scroll-live-scroll
I have notice that if I append the javascript to the popular_data.php file then it will work on the second to last picture but never the last loaded picture.

jquery fancybox - prevent close on click outside of fancybox

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;

Categories

Resources