Fancybox - Modify javascript to add options - javascript

I have the following Fancybox declarations in my page:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
I need to reduce the size of the image used by the modal box and I believe I can do that by setting the "autoDimensions", "width", and "height" options available with Fancybox, I just don't know how to integrate that with the hover function, since there isn't an option in Fancybox to specify a function for a hover event. (I hope this is making sense.)
Anyhow, does anyone know how I can modify the above javascript to control the width and height?
Thanks!

Sorry but images in fancybox don't use "autoDimensions", "width", and "height" API options. Those options are for ajax, iframe or inline content only.
Images in fancybox are displayed either, re-sized to fit into the viewport (when autoScale is set to true) or in their original size (when autoScale is set to false). If the original size is bigger than the height of the viewport, then you have to scroll down the parent page to see the whole image.
The only way you can re-size images in fancybox other than above is using jQuery css() API (which, I wouldn't advise ... it produces an odd behavior). You can call it using fancybox's callback option onComplete like:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'onComplete': function(){
$("#fancybox-outer, #fancybox-content").css({'width':300,'height':150});
}
}).hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
Note that options mentioned above are for fancybox v1.3.x.
Use it at your own risk.

you can always add code to document.ready to trigger every time. so just check for the event and resize.
or since the elements are hidden at first, you can get the event trigger using the show event

Check for the event onstart. onstart will be called right before attempting to load the content, and you can add your resize operations there.

Related

jQuery remove twice function call

Please consider this very simplified sample.
Below code remove a fixed nav bar from pages when screen size is small. It is named removeFixedNavbar().
This should be done when document is loaded and when window is resized. Please see the code. Well, this code seems some how ugly (calling removeFixedNavbar() twice, is it a better way to write it (with less code).
$(document).ready(function() {
removeFixedNav();
$(window).resize(function(){
removeFixedNav();
});
});
$(document).ready(removeFixedNav);
$(window).resize(removeFixedNav);
This should work, but i think it should be doable using CSS Media Queries only (depends upon the use-case).
Even simpler could be:
$(function(){
$(window).resize(removeFixedNav).trigger("resize");
});
Placing it at bottom most part can get rid of $(function(){...})
An other equivalent version can be:
$(function(){
$(window).trigger("resize");
});
$(window).resize(removeFixedNav);
Well you call it twice in document.ready.
Place window. resize outside document.ready event.

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.
$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck
I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

jquery colorbox and custom scrollbar

I would like to use a custom scrollbar with Colorbox
I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:
(function(jQuery){
jQuery(window).load(function(){
jQuery("#cboxLoadedContent").mCustomScrollbar();
});
})(jQuery);
Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.
The question is why isn't it working on the right div i.e. #cboxLoadedContent?
#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).
The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.
From colorbox examples:
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxContent").mCustomScrollbar();
}
});
Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxLoadedContent").mCustomScrollbar();
}
});

Refactor jquery animate

I am using the datepicker plugin from here - The example is on the bottom of the page.
It is utilizing jquery animate() like this:
$('#widgetField>a').bind('click', function(){
$('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
state = !state;
return false;
});
I need a recommendation on how to refactor this into an accordian-like expanding div. I do not want the calendar to float, I need it to push the div content below it down.
Recommendations?
Updated Answer
The widget floats because it has a position:absolute; and a height offset in the jquery function.
See the css:
#widgetCalendar has a style, position:absolute. You will need to remove that, which will make it work, but then there are additional styling issues that can all be taken care of with css adjustments.
Or, you can try using jQuery .slidedown:
$('#widgetCalendar').slideDown();
Then you wouldn't need the height offset.
It would be great if you could do a jsfiddle, as I am unable to test without seeing what you are doing.
Edited - user not using jQuery UI
This is due to the nature of jquery UI - the calendar is a specialized dialog. The jQuery UI dialog is a popin. But, you can counteract this:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

How to evalute code in the chain or pretend callback function?

I dynamically add an image on my page :
<div class="simple_overlay" id="overlay">
<img src="" />
</div>
<script type="text/javascript">
$(function() {
$("a[rel]").overlay({
var source = this.getTrigger().attr('href');
this.getOverlay().find("img").attr({'src': source});
});
});
</script>
Now, I need to get width of the new image and calculate margin-left corresponding to it. Native jQuery Tools methods doesn't work, because when overlay is loading, image hasn't yet loaded and container #overlay width is 0.
Is there any option to emulate callback on this chain, so i can use width() right after attr() has evaluated?
Use the images load event (not to be confused with window.load), like this:
$("a[rel]").overlay({
var source = this.getTrigger().attr('href');
this.getOverlay().find("img").one('load', function() {
//run your code here, the image is loaded and is "this"
}).each(function() {
if (this.complete) $(this).load(); //trigger load, handles from cache cases
}).attr({'src': source});
});
This uses .one() to run your code only once. The load event fires when that image is loaded...but this doesn't always fire when loading it from cache (depending on browser), which is what the .each() is for. If the browser loaded it from cache and fired the event...that's ok too, the .one() handles that, code still runs once in every case :)

Categories