Develop Reference

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;
}

How to call fancybox resize function when fancybox-wrap height changes

I have need to show this gallery as http://tympanus.net/Tutorials/ResponsiveImageGallery/ in fancy box. It works fine except one design problem that is fancybox doesn't come in the center for first time as it has to download few image for first time if one open the same album second time it then show correctly in the center as all image are cached. I tried to resolve this issue with following code but it is not work
I cant give fancybox fixed width and height as images are of different dimensions
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: true,
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Other solution i can think of is to call fancybox.center() and $.fancybox.center(); function when fancybox wrapper with changes fancybox-wrap.
This i can help me correctly repositioning the fancybox in center.
But i am not sure how to track height change for fancybox-wrap and call the reposition the fancy box.
Fancybox V 1.3.4
Help in this regarding is appreciated.
UPDATE:
Just to give you an idea i face similar problem that is happend on this link.
http://www.picssel.com/playground/jquery/getImageAjax.html
When you click for the first time it small fancy-box and doesn't re-size when image is downloaded. In my case i have to download multiple image and it take time to display the first image in between takes default value but doent resize when first image is download.

set autoSize to false in order to set width and height for fancybox. i.e.
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
autoSize: false,
width: '70%',
height: '70%',
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Hope this helps you.

Dynamic Inline Content Loading
function loadAnswer(id){
jQuery.fancybox({
'content' : jQuery("#outerFAQ"+id).html(),
/*For Auto height and width*/
'onComplete' : function(){
jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
jQuery.fancybox.resize();
jQuery.fancybox.center();
}
});
}
/*Dynamically Set the id and passing it to function*/
<a class="fancybox" href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>
<div id="outerFAQ<?php echo $data->getId(); ?>" style="display:none;">
<div id="ans<?php echo $data->getId();?>">
demo
</div>
<div>
Single inline content loading
jQuery( "#demo" ).click(function() {
jQuery.fancybox({
'content' : jQuery("#demoContent").html(),
onComplete: function () {
/*Static height width*/
jQuery("#fancybox-content").css({
height:'500px',
overflow:'scroll',
});
jQuery("#fancybox-wrap").css("top","10");
jQuery(".fancybox-wrap").css("position", "absolute");
}
});
<a id="demo" href="#">Click me</a>
<div style="display: none">
<div id="demoContent">
demo
</div>
</div>

if you fancybox is already open and want to resize then below code will helps you.
$.ajax({
url: 'YOUR URL',
data:'DATA WANT TO TRANSFER',
type: 'post'
dataType: "text",
success:function(result){
//PLAY WITH RESULT SET
$.fancybox.toggle();
},
error:function(request,error){
alert("Error occured : "+error);
}
});
Reference from : Resize Fancybox

Solution, I managed to make it work by resizing after delay of 3 seconds by that time first image is downloaded completely
$(".fancybox-iframe").fancybox({
width: '70%',
height: '70%',
hideOnOverlayClick: true,
centerOnScroll:true,
onComplete : function(){
// $.fancybox.resize();
// $.fancybox.center();
var resize = setTimeout(function () {
$.fancybox.center();
}, 3000)
}
});
I believe more professional approach will be check using jquery when image is downloaded completely and then call $.fancybox.center(); function
Please if this is fine or we can do it some otherway.

Did you try to use <center></center> include of your fancybox? I think so it'll work on your page. and no need to use java, cause you are just trying to use it as center.

Basic jQuery Slider - Current Slide Number

I'm currently having issues displaying the current slide number, basically I need to have the current slides number inserted into a span class called current slide. I'm using follow jquery slider: http://basic-slider.com
I'm using this snippet to call the script.
jQuery(document).ready(function($) {
var total = jQuery('.bjqs li').length;
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : false,
responsive : false
});
jQuery('#slider-status > .total-slides').html(total);
});
According to the design it needs to be shown as 1(current slide) / 3(being total amount)
Any help would be very much appreciated!

If you are not using bjqs min file you can modify set_next function to get current slide number and apped it to span.

Try this:
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : true, // set it to true
responsive : false
});
From http://basic-slider.com/
showmarkers : true, // Show individual slide markers

resize fancybox when I click the fancybox

I use fancybox for my website to enlarge my pictures. What I want is to make a sort of zoom function.
When the fancybox is open and I click on the image in the fancybox I want to increase the width of the fancybox
I tried something like
Markup:
<div style="display:none;">
<div id="view_invoice" style="height:950px; width:663px;">
<div class="process"><img src="../../images/progress.gif" /></div>
<div id="showInvoice" style="position:absolute;"></div>
</div></div><a id="get_invoice" href="#view_invoice" style="display:none;">link</a>
jQuery:
$('.table_content_results table').click(function()
{
$('#showInvoice').html('');
var invoiceDir = $(this).attr('dir');
var invoiceId = $(this).attr('id');
$.ajax({
type: "POST",
url: "includes/get_pdf.php",
data: "INVOICE_ID="+invoiceDir,
complete: function(data)
{
$('#showInvoice').html(data.responseText);
}
});
$("#get_invoice").fancybox(
{
'overlayOpacity' : 0.6,
'overlayColor' : '#000',
'titlePosition' : 'inside',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'easingIn' : 'swing',
'padding' : 10,
'autoDimensions' : true
}
).trigger('click');
});
$("#showInvoice").click(function()
{
$("#view_invoice").animate({ width: 1000 });
$("#showInvoice").width(1000);
$("#showInvoice").children('img').animate({ width: 1000 });
$('#fancybox-wrap').width(1000);
$.fancybox.center();
});
This works but not properly. The size of the fancybox increase but the position is not at the center of my screen so i tried to fix that with $.fancybox.center(); but that didnt work.
The second thing is that the div where the image is in dont increase width so I get some scrollbars. I tried to fix that with $("#showInvoice").width(1000); but I still get the scrollbars instead of a div with a width of 1000px.
So I hope that someone can help me with this.
Thanks in advance!

You can try resizing the window after all.
$(window).resize();

Width and height issue with fancybox

When I've added this code no setting on width and height works
jQuery(document).ready(function() {
$('a.iframe').fancybox();
});
What are the options to get around it?

Take a look at the documentation here: http://fancybox.net/api
You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.
UPDATE: I tested the following solution successfully:
$('a.fbtag').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
This assumes that the class name of the link you're opening is 'fbtag'.

Fancy Box width and Height always varies with the media type.
If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.
To counter the effect of media dimensions and define the default width & height for Fancy Box
Try this:
$.fancybox.open(collection.toJSON(), {
afterShow :function(){},
maxHeight : 600,
minWidth : 500
});
FancyBox width will be minimum - 500 pixels.
FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.

For example
$.fancybox({
'content':"This will be the content of the fancybox",
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

$(document).ready(function() {
$(".fancy-ajax").fancybox({
type: 'ajax',
autoDimensions: false,
'autoSize': false,
'height': 'auto'
});
});
The above codes worked for me. However, I was designing in Twitter Bootstrap.

you can do this two way
With iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
type: 'iframe',
href : 'url_here'
});
})
Without iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
autoDimensions: false,
});
})