fancybox with mutiple title on right side of image - javascript

I need to show image title, date and link on the right side of the image.
something similar to this example
by default fancybox allow us few option like inside, outside, top but not left or right side of image. and with navigation buttons < >
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade'
});
Is there a ways we can do it like as shown in image below
Fiddle example http://jsfiddle.net/JYzqR/

You can use fancybox tpl (template) option and add information on callback like afterLoad like so:
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade',
afterLoad: function() {
var html = '<span>Date, File Type, Download</span>';
$('.fancybox-sidebar').append(html);
},
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><div class="fancybox-sidebar"></div></div></div></div>'
}
});
DEMO

Related

How to load fancybox when the visitor comes from a referer?

Update: Now it popups from a specific referer =)
Here is my fancybox code:
if (document.referrer) { //if for the referrer
referrerone = /referrersite.com/;
if (referrerone.test(document.referrer)) {
$(document).ready(function(){
$(".fancybox").fancybox({
});
$(".various").fancybox({
hideOnContentClick: true,
showCloseButton: false,
transitionOut : 'none',
transitionIn : 'none',
}).trigger('click');
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
}
}
I want to add some static rules like the Popup plug-in for wordpress allows:
-Fancybox will auto close after some seconds.
-Not from an internal link: Shows the PopUp if the user did not arrive on this page via another page on your site.
You can use
document.referrer
to get the last page which your page has been loaded from

Prevent jquery fancybox from closing when clicking on link

I have a jquery fancybox with a normal a href link inside it. When I click on that link the fancybox closes. How can I prevent the fancybox to close after I clicked on the link?
This is the code for the fancybox:
$(function(){
$(".booking_module").fancybox({
maxWidth : 550,
topRatio : 0,
fitToView : false,
width : '100%',
height : 'auto',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
centerOnScroll: true,
autoResize: true,
autoCenter: true,
margin : [topmargin, 0, 0, 0],
helpers : {
overlay : {closeClick: false}
}
});
});
This option will disable closing fancybox when clicking on the background
$(document).ready(function() {
$(".booking_module").fancybox({
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
}
});
});
and this option will disable all default click methods of closing fancybox
$(document).ready(function() {
$(".booking_module").fancybox({
closeBtn : false,
closeClick : false,
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
},
keys : {
close: null
} // prevents close when clicking escape button
});
});
i think the second option is what you're looking for. Maybe without the "closeBtn"
The problem was that I was using 3 classes for the a href. One of those classes was not used anymore. When I removed that un-used class it didn't close anymore after clicking on that link.

Is it possible to make multiple Bootstrap popovers more DRY?

I've run into a problem, where I have more than 10 popovers in one table. They all should display a popover on hover, and have a similar html, but with some differences in content. I made it the easiest way, but I feel there must be a smarter way to do this.
Is it possible to make this js code more DRY?
$('#static-pop-1').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': '<div class="static-popover"><span>Hey!</span></div>'
});
$('#static-pop-2').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': '<div class="static-popover"><span>Hey 2!</span></div>'
});
http://jsfiddle.net/axt63orn/
Assuming you don't want the popover to just say Hey 1, Hey 2 etc. but actually set a different content in each, but keep the rest of the settings the same, you can do
var settings = {
trigger : 'hover',
placement : 'bottom',
html : true
}
$('#static-pop-1').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey!</span></div>'
}));
$('#static-pop-2').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey 2!</span></div>'
}));
$('#static-pop-3').popover($.extend({}, settings, {
content: '<div class="static-popover"><span>Hey 3!</span></div>'
}));
FIDDLE
or you could use a function
function setting(text) {
return {
trigger : 'hover',
placement : 'bottom',
html : true,
content : '<div class="static-popover"><span>'+text+'</span></div>'
}
}
$('#static-pop-1').popover(setting('Hey!'));
$('#static-pop-2').popover(setting('Hey 2!'));
$('#static-pop-3').popover(setting('Hey 3!'));
FIDDLE
You could use data attribute:
<a class="pop" id="static-pop-1" data-mycontent="Hey 1!" title="">Content 1</a>
$('.pop').popover({
'trigger': 'hover',
'placement': 'bottom',
'html': true,
'content': function(){
return '<div class="static-popover"><span>'+$(this).data('mycontent')+'</span></div>';
}
});
JSFiddle

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

Calling fancybox gallery which has iframe and images

what I'm trying to do is to call fancybox gallery which has and iframe and couple images, by clicking a non related div. Everything works fine with image group, but when i try to add an iframe it shows "The requested content cannot be loaded.
Please try again later."
Below is html and javascript:
<div id="gallery_1">Gallery</div>
<script>
$('#gallery_1').click(function (){
$('#gallery_1').addClass('cur_gal');
$.fancybox([
'iframe.html',
'2.jpg',
'1.jpg'
],
{ 'padding' : 0,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'type' : 'image',
'changeFade' : 1,
'loop' :false,
afterClose: function() {
$('#gallery_1').removeClass('cur_gal');
}
});
});
</script>
I tried to remove 'type' : 'image' , but then the iframe doesn't show.
I've also tried to change type to iframe, but then the images are messed up. The sizes are incorrect, and the scroll bar appears.
So maybe someone has any ideas how to display iframe and images correctly?
You need to specify the type of content individually but you are doing it globally so try modifying your script this way
$(document).ready(function () {
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
$.fancybox([{
href: "iframe.html",
type: "iframe"
}, {
href: "image2.jpg",
type: "image"
}, {
href: "image1.jpg",
type: "image"
}], {
padding: 0,
// 'transitionIn': 'fade', // for v1.3.4 not compatible
// 'transitionOut': 'fade', // for v1.3.4 not compatible
// 'type' : 'image', // sets type of content globally
changeFade: 1,
loop: false,
afterClose: function () {
$('#gallery_1').removeClass('cur_gal');
}
});
});
}); // ready
See JSFIDDLE
EDIT : you can also change this lines
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
into this
$('#gallery_1').click(function () {
$(this).addClass('cur_gal');

Categories