Is it possible to open fancybox with a class in href? - javascript

I have this link to open my div #fancyContent in a fancybox:
<a class="fancybox" href="#fancyContent"></a>
Here I have my div #fancyContent:
<div id="fancyContent">
//here I have some content
</div>
And it is working fine,
But I want to pass my <div id="fancyContent"> to class <div class="fancyContent">, because I have more than one div with id="fancyContent", so it not seems correct to use the same id many times.
Do you know if this is possible?
Here I have my script to start fancybox:
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
fitToView : false,
width : '80%',
height : '80%',
autoSize : false,
closeClick : false,
}
});
})

Related

Semantic UI transitions on page load

I am using semantic ui. I want the transitions to occur when the page loads in browser. What I am able to do right now is hover on transition. Is it possible to do?
$(document).ready(function(){
$('#animate').hover(function(){
$(this).transition({
debug : true,
animation : 'jiggle',
duration : 500,
interval : 200
});
}, function(){});
});
<h1 class="ui header" id="animate">
<div class="content">
Hello
<div class="sub header">hello.</div>
</div>
</h1>
You can add transition to the DOM element on the document ready function.
$(document).ready(function(){
$('#animate').transition({
debug : true,
animation : 'jiggle',
duration : 500,
interval : 200
});
});
Here is the FIDDLE

Spectrum colorpicker not working on jQuery dialog

I'm trying to show the Spectrum colorpicker on a jQuery dialog but it's not showing up. This is the code I'm using for loading spectrum:
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'colour' a div inside my jQuery dialog.
This is the code that initializes the dialog:
dialogObj = $("#_dialogPanel").dialog({
autoOpen: false,
resizeable: true,
position: { my: "center-100 bottom-40", at: "center center" },
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
$("#_dialogPanel").submit( function(e) {
e.preventDefault();
});
dialogObj.dialog("open");
The content in the dialog is dynamically loaded using:
$("#_dialogPanel").empty().html(response);
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'response':
<div name='colour' id='colour' />
The references to spectrum.js and spectrum.css are added in the master page
Spectrum color picker doesn't work on div, only on input elements
<input type='text' id="colour" />

Remove Scroll from Specific Fancy Box [duplicate]

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.
Here are my js calls
<script type="text/javascript">
$(document).ready(function() {
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
});
</script>
<script>
$(document).ready(function()
{
$('.fancybox').fancybox(
{
padding : 0,
openEffect : 'elastic'
}
);
$(".fancybox").fancybox(
{
wrapCSS : 'fancybox-nav',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
}
);
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
And here is how I have images and video displayed within my HTML:
<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">
Do I need to add something or change anything within the .js file? What am I missing?
First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):
.fancybox-nav-video .fancybox-nav {
width: 60px;
}
.fancybox-nav-video .fancybox-nav span {
visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
left: -60px; /* move left outside fancybox area */
}
Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.
Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:
<script type="text/javascript">
$(document).ready(function() {
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
});
// fancybox for images
$(".fancybox").fancybox({
// options for images here
});
}); // ready
</script>

Fancybox is not working with specific selector

I use this code but it is not working...
$(document).ready(function () {
$('#welcomePopup').fancybox();
});
but another code is working fine like
$.fancybox({
'padding': 5,
'width': 625,
'height': 450,
'content': $("#welcomePopup").html()
});
I would like to use first approach because the second one duplicate HTML.
Any clue?
This
$(document).ready(function () {
$('#welcomePopup').fancybox();
});
only binds the selector #welcomePopup to fancybox but it doesn't open it. You still need to click on that selector to open fancybox.
A normal scenario for the code above is
<a id="welcomePopup" href="{your target content}">open fancybox</a>
where #welcomePopup is the fancybox trigger
On the other hand, if the contents of #welcomePopup is what you want to show as fancybox content (#welcomePopup is the fancybox target), then you need another selector to act as the trigger.
The normal approach for this second scenario would be :
html
<a class="fancybox" href="#welcomePopup">open welcome pop up in fancybox</a>
<div style="display: none;" id="welcomePopup">
<h1>fancybox content</h1>
<p>lorem ipsum</p>
</div>
jQuery
$(document).ready(function () {
$('.fancybox').fancybox();
});
Last, if you want to open fancybox without a trigger AND on page load, then either of these will do the trick
$.fancybox({
'padding': 5,
'width': 625,
'height': 450,
'href': "#welcomePopup"
});
or
$.fancybox("#welcomePopup",{
'padding': 5,
'width': 625,
'height': 450
});

Show this div and hide that div

Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show
<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde
<div style="display:none;">
<div id="demoView">
<div class="fl w900 pa20 bg2 tac">
<h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
<h4 class="ff2 fwb fs26 mb40 cf3">Email: <span class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info#caremerge.com">info#caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
<img src="images/sites/demo1.png" alt="" class="dpib mb20"/>
</div>
</div>
</div>
The function below is successfully hiding the video but its not displaying the div mentioned above in it...
function onPause() {
froogaloop.addEvent('pause', function(data) {
//$('a[href="#various2"]').fadeOut();
$('#divVideo').fadeOut(500);
// $('#various2').fadeOut(500);
//$(' #demoView').fadeIn(500);
$('#demoView').fadeIn();
alert('ST-UCK');
});
}
Some part of FANCY BOX JQUERY OF MY CODE
jQuery(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("#various2").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'onClosed' : function() {
document.getElementById('iframe-video');
},
'onStart' : function() {
//alert("hi");
//$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
}
});
When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.
So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.
Maybe you just need to trigger the second fancybox inside your (pause) event callback like
function onPause() {
froogaloop.addEvent('pause', function(data) {
$('#example4').trigger("click"); //linkfunctionality you want to show
});
}
... that will bring the second content (#demoView) inside fancybox and the current (#divVideo) will just fade out.
Is it now because the enclosing div for demoView is hidden? So something like...
$("#demoview").parent().css({'display','inherit'});
May work?
Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.

Categories

Resources