Fancybox2 modification to iframe with navigation buttons - javascript

i have a list of iframe pop ups for which i am using the data-fancybox-group="gallery" so that the user can browser left and right through the content. The page this list sits in is also inside an iframe. the reason for this is so that the main header does not reload as it needs to play continuous music via soundcloud. I had to amend $('.fancybox').fancybox(); to make the iframe content automatically resize to fit the content and to appear outside it parent frame. However this amended script prevents the button function from working. this is my code, basically i need to get the iframe buttons function working like a gallery...
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').click(function(e){
e.preventDefault();
parent.$.fancybox({'href' : this.href,
'type':'iframe',
autoSize : false});
//fancybox
return false;
}); //click
/*$('.fancybox').fancybox();*/
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
parent.$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
});
</script>

Related

Content inside fancy box need to be responsive

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/
As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.
every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}
I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest
you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}

Scroll to anchor after opening fancybox

i have realized a "help"-view in a fancybox.
In this fancybox i've got a navigation menue. This menue works with anchor links. So far so good.
Now i want to open this fancybox and directly scroll to a spezific anchor.
Here my code, how i open the fancybox:
$.fancybox({
width : 1000,
height : 800,
minHeight : 800,
maxHeight : 800,
minWidth : 1000,
maxWidth : 1000,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'yes',
href : "#idofview",
})
I tried a few things, but nothing works.
I tried:
location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
$(this).closest('.fancybox-inner').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
});
//or
$(document.body).scrollTop($('#anchorid').offset().top);
I also tried to trigger the click of my anchor link:
$("#btn_link").trigger('click');
Is there any reason to direktly scroll to the anchor in a fancybox?
You may need to find the offset().top of your targeted anchor first, then just animate the .fancybox-inner selector to that position (you don't need this $(this).closest() method at all) so :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
afterShow: function () {
var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
$(".fancybox-inner").animate({
scrollTop: toScroll
}, 1000);
}
}); // fancybox
}); // ready
Notice that I am subtracting 35px from the offset (in var toScroll) because the fancybox's padding, but this is a variable you may need to play with.
See JSFIDDLE

Fancybox issues with mutiple popups and timeouts

I have fancybox 2.1.5 and have built a page with 4 different links to open a fancybox popup. I have also added a setTimeout for these popups so that after a set amount of time, the popup will automatically go away.
The issue is that when I open a popup, manually close it, and then click on a popup, randomly between 1 to a few seconds, it will close itself (I have it set to 15 second timeout). I don't know if this is caused by having multiple popup links, or what. Below is the code I used:
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow: function(){
this.title = $(this.element).next('.newTitle').html();
},
width : '700',
height : '380',
closeBtn : false,
helpers : {
overlay : {
css : {
'overflow' : 'hidden',
'background' : 'rgba(0,0,0,0.85)'
}
}
}/*,
afterLoad: function(){
setTimeout( function() {$.fancybox.close(); },15000);
}*/
});
});
And the HTML:
<a class="fancybox fancybox.iframe" href="includes/elevator.html"><img src="images/elevator.gif" class="round" width="324" height="183"/></a>

buttons persist when launching dialog

I am using jQueryUI and I have a web page with a few links that when clicked will display a modal window. The issue i am having is that when i click one of the links that has a button then close it and click another link that doesnt have buttons the modal launches but the buttons are still there. Despite the fact that no buttons are being specified. I have tried to use the close property when creating the dialog calling $(this).dialog("close") doesnt solve the issue. Calling $(this).dialog("destroy") solves the issue except that the contents of the modal are then shown on the webpage.
This is the function I call to launch the modal.
General.modal = function(options)
{
if(!options.hasOwnProperty(modal))
{
options.modal = true;
}
$('#modal').dialog(options);
};
This is the call without buttons.
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
});
This is the call to that function with buttons:
myApp.General.modal({
title : "Upload Documentation (" + groupTitle + ")",
height : 500,
close: function(){$(this).dialog("close");},
width : 600,
buttons : {
"Upload" : jQuery.proxy(directoryView.uploadClicked, directoryView, model.get("gid"))
}
});
I presume that the dialog is not being destroyed so the last button definition is staying around. You probably need to ensure the buttons attribute is null on subsequent calls:
myApp.General.modal({
title : groupTitle + " Documentation",
height : 500,
width : 600,
buttons : null,
});

qTip tooltip does not appear, jQuery

I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.
Hovering over the items some information appear. That works until I use the paginator to go to the next page.
The pagination reloads the content. But it has the same structure as when I refresh the page.
Here's my code:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
The html/dom does not change:
<a class="ppname" rel="link" href="#">...</a>
qTip takes from every a.ppname the rel value end loads the content.
This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().
This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.
The correct way to do it is (from that answer):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});

Categories

Resources