jCarousel and Fancybox - javascript

On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.

It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.

Related

kwicks slider loading but mouse hover not working

I have added kwicks javascript , css , jquery but the slider is not working
I tested the website in firebug and it's not showing any error or undefined variable
http://demo2.inheritedarts.com/george/
can some one help me finding a bug ? is it in my code or something i am doing wrong
try adding this script in your <head></head> tag
<script type='text/javascript'>
$(document).ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu'
});
});
</script>
i think you forgot to initialize your ul element with kwicks API

CloudZoom with Fancybox

I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.
If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)

jQuery Easing Issue

I've got an Unordered List setup, I would like to apply the simple elastic property used in jQuery. When running the script, I keep getting an JavaScript Error :
Error: D.easing[this.options.easing || (D.easing.swing ? "swing" : "linear")] is not a function
Source File: jquery-pack.js?1296815924
The Java is working but it is not creating the desired effect. My jQuery Code is :
<script type="text/javascript">
$(document).ready(function(){
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeOutElastic"})
});
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeInBounce"})
});
});
</script>
I had taken this script from a tutorial, so would have expected it to work. It seems that the easing is not being passed from page to the script?
Any help appreciated.
The easeOutElastic and easeInBounce easing functions are defined by the jQuery UI plugin, not by the core jQuery framework.
You'll have to include that plugin in your page.
You have to include an easing library like this one: http://gsgd.co.uk/sandbox/jquery/easing/
#Frédéric Hamidi No need for the whole jQuery UI there...

Fancy Box - how to refresh DIV on modal window onclosed

I've searched high and low through this forum and thus far I don't see an answer. And, I think I beginning to lose my mind.
Could be I'm just missing it as I am NOT a programmer.
I am a visual designer that can usually install pre written code without to much
difficulty. And, indeed I have installed FancyBox and have it working well
except for one small problem which I desperately need help with.
I am working with a dynamically generated page written in ColdFusion.
Three divs on the page contain FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page
'onClosed': function() {
parent.location.reload(true); }
});
How, oh how can I get just a single div to refresh "onClosed" as
apposed to the entire page??????
There a a couple of ways to do that.
One way is to get the content of the div with a function. This function will preform an ajax-call to get the content, say the function is called getcontent(); your syntax will be something like onClosed': function() { getcontent(); }
A better way to do this is to get the edited content and push this in the div. say you set a variable text with the content after the save of the editor, after that you can push this variable into the div with onClosed': function() { $('#divid').html(yourvar); }
I must say both ways are not easy to implement. Maybe if you show the code you currently having we can help you some more.
Right on Tim, well Fancybox uses jquery and loads it's own "library".
Each link that invokes fancybox has an id which is referred to like thus
<script type="text/javascript">
$(document).ready(function() {
$("#link1").fancybox({
'titleShow' : false,
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed': function() {
parent.location.reload(true); }
});
});
</script>

Jquery Fancybox not working after postback

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.
My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.
Any thoughts? Anyone experienced similar behaviour?
UPDATE : Some Code..
I have a databound repeater with a fancybox on each repeating item.
They are instanciated by (outside the repeater)
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
The anchor tag is repeated..
href="#watchvideo_<%#Eval("VideoId")%>"
As is a div with
id="watchvideo_<%#Eval("VideoId") %>
As is a script element that instanciates the flash movies
Yes the VideoIds are being output the the page.
UPDATE : It's not a problem with the flash..
It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.
UPDATE : I wonder if it is the updatepanel.
Rebinding events in jQuery after Ajax update (updatepanel)
-- lee
The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.
function pageLoad(sender, args) {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
see this answer for more info
Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?
It was the Update panel as described
here.. Rebinding events in jQuery after Ajax update (updatepanel)
As suggested I simply replaced
$(document).ready(function() {
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$("a.watchvideo").fancybox({
'overlayShow': false,
'frameWidth' : 480,
'frameHeight' : 400
});
}
}
and it worked!
-- Lee
This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:
$('body form:first').append( ... );
I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.
I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.
I solved the issue replacing this:
<script>
$(document).ready(function () {
$("a.small").fancybox();
});
</script>
with this:
<script>
function pageLoad(sender, args) {
$("a.small").fancybox();
};
</script>

Categories