We Keep Coding

Javascript and Jquery Conflict

Im having a problem, when i delete this code below, the video player popup player works but my contact form doesnt.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
I have added the Script for no conflict but its still now working, here are my JS and Jquery codes which are in the head tag. Any help would be appreciate it.
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
</script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script src="http://jwpsrv.com/library/WDP87vS0EeKnIhIxOUCPzg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'conscious-video.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<!------Autoresponder---->
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var close_note = $("#note");
close_note.click(function () {
j("#note").slideUp(1000, function () {
j(this).hide();
});
});
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="images/ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(1000, function() {
$(this).hide();
});
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
if(msg === 'OK') {
$('input').val("");
$('textarea').val("");
}
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Your message has been sent. Thank you!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(1000);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
});
/* ]]> */
</script>

Do not use two versions of jQuery inside of the same page (not recommended).
jQuery.noConflict()
Is supposed to be used when you are using two different libraries fighting for the $ (which is an alias for jQuery).
Many JavaScript libraries use $ as a function or variable name, just
as jQuery does. In jQuery's case, $ is just an alias for jQuery, so
all functionality is available without using $. If you need to use
another JavaScript library alongside jQuery, return control of $ back
to the other library with a call to $.noConflict(). Old references of
$ are saved during jQuery initialization; noConflict() simply restores
them.
But... in your case... docs says:
If for some reason two versions of jQuery are loaded (which is not
recommended), calling $.noConflict( true ) from the second version
will return the globally scoped jQuery variables to those of the first
version.
More info: http://api.jquery.com/jquery.noconflict/
Good luck.

How to call javascript function after fancybox terminate to load

i'm call fancybox in this way:
$(".add_exc").fancybox({
maxWidth : 1000,
maxHeight : 600,
fitToView : false,
height : '70%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
where .add_exc is:
<a class="add_exc fancybox.ajax" href="ajax_content.php">
<img src="click.png" />
</a>
in the ajax content i have some checkboxes and i need to check inside the parent window if some elements are present so that i can check the checkbox inside fancybox.
If i load javascript content inside the ajax content, it will be discarded.
How can i solve? thanks!!

You could try with the fancybox callback afterLoad
$(".add_exc").fancybox({
// all other API options
closeEffect : 'none',
afterLoad : function(){
myFunction();
// or some jQuery
$variable = $(".selector:checked").val();
}
});

How do I make fancybox href dynamic?

I have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.

Without each() or click() simply add the beforeLoad callback to your script like this
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE: this is for fancybox v2.0.6+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE

You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})

Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);

Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});

Start php program with fancybox

I am trying to start a PHP program in an overlay fancybox window. The fancybox window flashes, but won't come into focus. Can I start PHP program through fancybox?
Here is code:
jQuery(document).ready(function(){
$("a.php-overlay").fancybox(
{
'width' : 600,
'height' : 500,
'type' : 'iframe',
'scrolling' : 'yes',
'hideOnContentClick' : false,
'href' : 'http://example.com'
});
});
$('#hiddenclicker').trigger('click');

Shouldn't you trigger
$('a.php-overlay').trigger('click')
?

I believe what you may be trying to do is this:
HTML:
<a class="php-overlay" href="http://example.com">Open example.com in FancyBox</a>
JavaScript:
$("a.php-overlay").fancybox(
'width' : 600,
'height' : 500,
'type': 'iframe'
});
Fancybox will automatically attach an onClick event listener for you.

jQuery plug-in conflict

So, today I have one more question: HOW I COULD I HAVE BROKEN MASONRY JQUERY AND FANCYBOX (LIGHTBOX)?
I really need this. I have lost few hours trying solve this by myself, but i really can't. :/
This is my script where I'm calling fancybox and masonry:
<script type="text/javascript">
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
$(document).ready(function() {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
To be brief, my problem is on overlapping, but as you can see, I'm already using imagesLoaded plug-in, and more. I already tried to set all of images width/height, but it still doesn't work.
Thank you.
I need to press the mouse scroll to work. Ideas?

I rewritten your code:
<script type="text/javascript">
$.noConflict();
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
jQuery(document).ready(function($) {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
Hope this works on you.