I'm using Fancybox to open a number of links from a menu and I wondered if there's a function to do this instead of writing out each one.
I'm using:
$("#linkID").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
And I was trying to use:
$(document).ready(function() {
function FancyBoxItemMenu(linkID){
$("#linkID").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade'
});
};
On the menu item (an "a" tag) I used:
onClick="javascript:FancyBoxItemMenu(this.value);"
But that doesn't seem to do it and I think I'm close, but there's something I'm missing.
Thanks in advance,
Steph
To solve your immediate problem, you need to append the string, like this:
$("#" + linkID).fancybox({
And use this.id instead of this.value.
A better idea overall approach would be to give the links a common class, for example:
<a class="fancybox" href="....">Link Text</a>
The just use that class as the selector:
$(".fancybox").fancybox({
Related
I use fancybox into a html page but i can't style the link to open the fancybox. Normaly i use a class to style the html link but with fancybox the class is already given to the fancybox. I need to change the background color of the link liks this:
background-color: #E9F3D8;
Here is the fancybox script i use into the html page
<script type="text/javascript">
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
And the link into this page looks linke this
mail
Hard to recreate problem with jsfiddle because all work fine here
<style>
a {
background-color: #E9F3D8;
}
</style>
<script>
$(document).ready(function() {
$(".contactForm").fancybox({
'width' : 750,
'height' : 420,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
Maybe give more details that we can help you or maybe I do something wrong with recreating.
On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG
I have a simple app with a Google Map and markers.
Clicking on the markers i have to show either an image, a slideshow or a video.
This is the javascript needed to display an image (properly working):
google.maps.event.addListener(marker1, 'click', function() {
$.fancybox({
href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg'
// other options
});
});
This is instead the attempt i have made to display a video:
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
Here i have recreate the situation with a Google Map with 3 markers, for one of them is possible to see an image, for the other a slideshow, for the third a video.
The image and the slideshow are working properly, but instead of the video i am seeing a blank box:
http://jsbin.com/ANuyojoW/13/edit
Someone perhaps knows how can i properly display a video?
Thank you very much!
Use following js:
Demo
// Video - Not working
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
The fancybox modal popup uses a bit of javascript:
$("#PeoplePopup").fancybox({
'autoScale' : false,
'padding' : 0,
'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'overlayColor' : '#000',
'overlayOpacity' : 0.5
});
which is fired when the link is clicked:
<a href = "peoplesearch.aspx" class="SmallWhite"
id="PeoplePopup">Search for Internal Contact details > </a>
How can I call the same popup code from multiple links?
User class instead of id, so you can you call the popupcode mutliple time.
//html
<a href = "peoplesearch.aspx" class="SmallWhite PeoplePopup">
Search for Internal Contact details </a>
//other links
...
...
//this jquery code will apply to the three links above
$(".PeoplePopup").fancybox({
//the same code here
})
While the provided answers are correct, I'd recommend giving jQuery some scope, otherwise you're searching for the existence of .PeoplePopup through the entire window object, e.g.
$('#PeopleContainer .PeoplePopup')
or
$('#PeopleContainer').find('.PeoplePopup')
While xpath selectors normally work left to right, jQuery understands how to optimize the first example.
if it's a small site, you won't notice the difference, but if you've got a dozen or more instances on the page and a pretty complex DOM, it will start to matter.
Use classes instead of an ID
$(".PeoplePopup").fancybox({
'autoScale' : false,
'padding' : 0,
'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'overlayColor' : '#000',
'overlayOpacity' : 0.5
});
Then in each link where you need this, add the PeoplePopup class -
Search for Internal Contact details >
Internal Contact details >
I am using Fancybox for showing html files with ajax in [removed] and after struggling to make it work in IE now it is showing the wrong width.
$(document).ready(function() {
$(".loginmodal").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 350
});
$(".agregardefmago").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'padding': 0,
'margin':0,
'autoScale':false,
'width' : 350,
'type' : 'ajax'
});
});
This is the javascript in the header with:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/static/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
When clicking on Agregar Definicion the fancybox appears with a correct automatically height but a wrong width.
I have tried removing the 'width' attribute, and many other combinations.
Thanks.
I believe the option you are looking for is autoDimensions.
$(".agregardefmago").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'padding': 0,
'margin':0,
'autoScale':false,
**'autoDimensions':false,**
'width' : 350,
'type' : 'ajax'
});
For more info: http://fancybox.net/api
Any specific reason why your using Fancybox?
I have also had some browser issues with it in the past (IE) so I switched to FaceBox seems to work a lot better in all browsers.