I'm trying to use iframe with in fancyapp 3 and I need to set the parameters preload and scrolling to false and auto, but with my current code I'm not able to do so.
Can you please check what it is wrong in it?
Follows the code:
<script>
$("[data-fancybox]").fancybox({
iframe : {
scrolling: 'auto',
css : {
width : '600px'
}
}
});
</script>
<a data-fancybox data "http://www.test.com">show</a>
You can do like this:
$("[data-fancybox]").fancybox({
speed: 230,
infobar: false,
buttons: false,
fullScreen: false,
thumbs: false,
closeBtn: false,
iframe: {
scrolling: 'yes' //'no'//'auto'
}
});
Related
i have developed aspx page
on it i have image galley using owl-carousel
now when i added magnific-popup plugin and used gallery option
then i noticed when i click on image on carousel it get popup successfully but images get duplicated (inside popup)
Owl-Carousel gallery
First popup
Duplicated Image
my aspx code :
<div class="owl-carousel">
<asp:ListView runat="server" ID="lvDesrtProgramGallery" ItemType="SharedKernel.Core.Model.ProgramPhoto" SelectMethod="lvDesrtProgramGallery_GetData">
<ItemTemplate>
<div class="item">
<a class="desert-safari-gallery" href="<%# Item.PhotoPath %>">
<img src="<%# Item.MediumPhotoPath %>" alt="" />
<div class="overlay">
<i class="fa fa-search-plus"></i>
</div>
</a>
</div>
</ItemTemplate>
</asp:ListView>
</div>
Js code
$('.desert-safari .owl-carousel').owlCarousel({
items: 3,
dots: false,
nav: true,
loop: true,
margin: 10,
autoplay: true,
navText: ['<i class="fa fa-angle-left fa-4x"></i>', '<i class="fa fa-angle-right fa-4x"></i>'],
onInitialized: callback,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false,
margin: 80
},
570: {
items: 1,
nav: false
},
768: {
items: 2,
nav: false
},
992: {
items: 3,
nav: false,
},
1200: {
items: 3,
nav: true,
loop: false
}
}
});
function callback(event) {
$(".desert-safari-gallery").magnificPopup({
type: "image",
removalDelay: 160,
loop: false,
preloader: false,
fixedContentPos: true,
showCloseBtn: false,
gallery: {
enabled: true
}
})
}
I just ran into this problem so I thought I'd give you my answer/solution.
The Reason:
Since your using owl carousel to loop, owl carousel is cloning items. Because your cloning the items within your carousel you're now feeding duplicates into the popup gallery. What a hassle right? There are two seemingly obvious solutions.
Solution 1: Don't use owl-carousel's loop.
This may not be the preferred solution if you want the looping feature of your carousel but this will no longer cause the popup to receive duplicate entries.
Solution 2: Create an array of objects based on the resulting elements, remove the duplicates, then use magnific's items property to set the gallery items.
Here is a working script I had to create based off a similar scenario I'm sure you can dissect what the process is:
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.gallery img').each(function(i){
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('gallery').magnificPopup({
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
});
}
});
})( jQuery );
I found that #Chris Stage's answer works perfectly, but for some n00bs who try to use the code verbatim may run into issues. I can't just leave a comment or accept the answer so I am posting my revision in hopes that it provides someone else with the correct code.
The one issue I found was that in the .each() function, that you have to target the wrapping a tag's URL to the larger image, not the image's URL itself due to the fact that the one used in the carousel may be a thumbnail or equivalent, and the larger one to the "larger image" to open in a popup may be a separate URL.
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.photo-gallery .item a').each(function(i){ //Target your wrapping a tag
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('.photo-gallery').magnificPopup({ //Target parent carousel container
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
removalDelay: 300,
mainClass: 'mfp-fade' //Adds magnific's fade effect
});
}
});
})( jQuery );
This solution worked perfectly with Owl's issue with "cloned" images and thanks to #Chris Stage for coming up with this. His answer should be the "Accepted Answer" but I'd also love an Upvote for the clarification so I can earn some Rep points :)
For future reference, here is a much simpeler solution:
$('.owl-item:not(.cloned) * .desert-safari-gallery').magnificPopup(..
Change your selector so that it will not be used for children of elements with the 'owl-item cloned' class.
You can use this little fix.
$('.owl-carousel.with-mfp').each(function () {
var $mfp = $(this);
$mfp.on('click', '.owl-item.cloned a', function (event) {
event.preventDefault();
var self = $(this);
// Dependency on image positions in owl and on unique a.href attrs
$mfp.find('.owl-item:not(.cloned) a').each(function (index) {
if ($(this).attr('href') === self.attr('href')) {
$mfp.magnificPopup('open', index);
}
});
});
$mfp.magnificPopup({
type: 'image',
delegate: '.owl-item:not(.cloned) a',
gallery: {
enabled: true
}
});
I try to implement FancyBox 3 in a carousel from the plugin slider revolution. The next code works well with FancyBox 2 but with fancyBox 3 the arrows not work. I want o know if someone has the solution.
Link: https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/
Code that works well in FancyBox2 but not shows the arrows in fancyBox3
/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;
/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {
jQuery(this).find('.fancybox').each(function() {
var $this = jQuery(this);
if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');
$this.addClass('fancybox').attr('rel', 'gallery').fancybox({
/* begin FancyBox options */
width: 'auto',
height: 'auto',
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
scrolling: 'no',
onClosed: function() {api.revresume()}
}).on('click', function() {api.revpause()});
});
});
fancyBox v3 uses data-fancybox attribute for grouping instead of rel.
So, replace
.attr('rel', 'gallery')
with
.attr('data-fancybox', 'gallery')
Simple demo - https://codepen.io/anon/pen/JyYryd?editors=1010
btw, v3 does not have these options you are using and afterClose callback is used instead of onClosed
I am trying to get a gallery up and running just with css bacground images put in iframes in fancybox.
Thats what I use:
$(".smallimg").click(
function(){
var baseimg = $(this).css('background-image');
var baseimg2 = baseimg.replace('url("','');
var bgimg = baseimg2.replace('")','');
$.fancybox({
helpers : {
overlay : true
},
width: '815px',
height: '550px',
type: 'iframe',
href: bgimg,
fitToView: false, //
scrolling: 'no',
iframe: {
preload: false
}
});
}
);
And I have several divs holding images as background images witht the class .smallimg applied.
For clicking image by image my code works quite good but I would like to have it in gallery style... is that possible?
Need to mention that the names of the images are NOT enumerated like 1.jpg 2.jpg ...
Rgds
Mirko
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
How can I add fancybox with the button helper and thumbnail helper?
And is it possible for the buttons(button helper) to be put under the image so that I can watch and select which I want to see?
the buttons
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
and the thumbnail code
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I am a bit new with JavaScript I couldn't get it to work.
What I am trying to do is mix them together and put the buttons on the bottom
P.S. Can I also uses fancybox thumbnail helper to work with Youtube videos?
You also have to load the jquery.fancybox-buttons and jquery.fancybox-thumbs js and css files apart from the fancybox regular js and css files. They are under the subdirectory "helpers" of the zip file.