Fancybox 1.3.4 just wont work - javascript

Hey im trying to implement fancybox 1.3.4 and I just cant get it to work
Heres my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$(".image").fancybox();
/* Using custom settings */
$(".iframe").fancybox({
'hideOnContentClick': false
});
$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();
$(".youtube").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
This is the image I want fancybox to open. Presently it just shows up in a new tab.
I use firebug and I can see that every script and stylesheet loads.
<a class="image" href="http://localhost:2053/files/15-20/theme3/test%20Photo.jpg">test Photo</a>

I'm guessing this was just a cut & paste error, but I'm going to state the obvious just in case. Your path to jquery has spaces in it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4/jquery.min.js"></script>
It should be:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
To be 100% doubleplus sure that jquery is loaded, open up the Firebug console and run this snippet:
$().jquery;
It should respond by printing the version number.

It looks like your document.ready function isn't enclosing all of your selector statements. You also might be missing the closing script tag.
Try adding this to the end of your script:
});
</script>
Full script:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$(".image").fancybox();
/* Using custom settings */
$(".iframe").fancybox({
'hideOnContentClick': false
});
$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();
$(".youtube").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
});
</script>

you should change the src to
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
instead of what you have here
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
read carefully to note the difference in the src attribute of the two samples,
make this change to all the src attributes and you should be good to go.

Related

How to use multiple versions of jQuery?

There are other answers on Stack Overflow however, I can't get any of them to work.
I need to use 2 versions of jQuery. Here is my code:
I link to first version then have this code:
<script>
var $i = jQuery.noConflict();
</script>
I then link to the 2nd version and have this code:
<script>
var $j = jQuery.noConflict();
</script>
Here is the code I need to run with the 2nd version $j
<script type="text/javascript">
$j.ready(function() {
$j('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});
</script>
I inspected the page in Chrome and not showing any errors but it will not run the slider at all.
Here's one way to load (and use) 2 versions of jQuery at once. There's no need to call .noConflict at all.
console.log(jQuery3.fn.jquery);
console.log(jQuery2.fn.jquery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>var jQuery3 = jQuery;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>var jQuery2 = jQuery;</script>
Then to run your slider script with jQuery2:
$jQuery2.ready(function() {
$jQuery2('#slider').layerSlider({
sliderVersion: '6.2.1',
type: 'fullsize',
responsiveUnder: 0,
fullSizeMode: 'hero',
maxRatio: 1,
parallaxScrollReverse: true,
hideUnder: 0,
hideOver: 100000,
skin: 'outline',
showBarTimer: true,
showCircleTimer: false,
thumbnailNavigation: 'disabled',
allowRestartOnResize: true,
skinsPath: 'skins/',
height: 800
});
});

Dropzone plugin working inside jQuery dialog

I'm trying to open the Dropzone upload control inside a jQuery dialog, it is showing the form but I can't drop any images in it.
This is the code for the dropzone control:
<link rel="stylesheet" type="text/css" href="../../Content/dropzone.css" media="screen" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/dropzone.js") %>\"></script>
<form action='/file-upload' class='dropzone' id='my-awesome-dropzone'></form>
And the code that builds the jQuery 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
});
The control is assigned to the dialog using the .html() property
Have you added
$('#my-awesome-dropzone').dropzone({ previewsContainer: "#_dialogPanel" //or whatever the css selector is for your preview area })
If you are doing a lot of events and callbacks, I would ignore the jQuery invocation and go for:
var myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { previewsContainer: "#_dialogPanel"});
That way you can easily add events such as
myAwesomeDropzone.on("thumbnail", function(file,fileurl) {
/* Add a nice green good file tick or whatever else you want to do */
});

document type does not allow element "h4" here

I can't find out what the problem is with this line of code:
…sc', '<h4 class="vtem_news_show_title">Nesmet El Bouhaira</h4>');$('#vtem1 img…
This is the error message I receive:
**document type does not allow element "h4" here**
What do I need to change?
This is the whole <script>:
<script type="text/javascript">
var vtemnewsshow = jQuery.noConflict();
(function($) {
$(document).ready(function() {
$('#vtem0 img').data('ad-desc', '<h4>Nesmet El Bouhaira</h4>');
$('#vtem1 img').data('ad-desc', '<h4>Tunis Mall 1</h4>');
$('#vtemnewsshowid89-newsshow').adGallery({
loader_image: 'http://laselection-immobiliere.com/modules/mod_vtem_news_show/images/loading.gif',
update_window_hash: false,
start_at_index: 0,
bottompos: 20,
thumb_opacity: 0.8,
animation_speed: 400,
width: '970',
height: '340',
display_next_and_prev: 1,
display_back_and_forward: 0,
slideshow: {
autostart: 1,
speed: 5000
},
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
enable_keyboard_move: 1,
link_target: '_self'
});
});
})(jQuery);
</script>
If your Javascript contains HTML tags, a validator considers these part of the document, unless you prefix your code like this:
<script type="text/javascript">
//<![CDATA[
jQuery.data(element, '<h1>Hello, world.</h1>');
//]]>
</script>
You might have come across another way to resolve this issue:
<script type="text/javascript">
jQuery.data(element, '<' + 'h1>Hello, world.<' + '/h1>');
</script>
This basically chops the string to "hide" the tags from a validator. It makes code harder to read and I'd never prefer this "hack" to the CDATA solution.
Please have a look at this question, which is rather old but has a lot of answers.

fancybox inline showing The requested content cannot be loaded. Please try again later

im trying to display inline using fancybox. but currently it pops up but displaying error "The requested content cannot be loaded. Please Try again later." . below is the code.
<script type="text/javascript">
jQuery(document).ready(function() {
$(".various").click(function() {
parent.$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 640,
'height' : 385,
'type' : 'inline'
});
return false;
});
});
</script>
and where i used fancybox
<a class="various" href="#inline3">Inline</a>
<div id="inline3" style="display:none;" ><img src="https://xxxxx" /></div>
FOUND A SOLUTION!
the thing is, i need to change type from inline to iframe. and also insert a 'href' string inside the javascript and remove the href from the link. and for the href value put in "this.href" ... and now it works.
ITs simple,
If the image is not loaded, it will happen,
Please check the image source in img tag then proceed.
$('.fancybox').fancybox({
autoSize : true,
autoResize : true,
autoDimensions : false,
padding: 25,
width : 630,
openEffect : 'elastic',
closeEffect : 'elastic',
type : 'iframe',
href :'Pass your url'
});
In my case, instead of using this.href, I passed url, and its working form me.

YouTube Fancybox not loading the video

I've setup a PHP video browser on a website (check videos pod) when a video thumbnail is clicked a video should popup and play with the FancyBox script, but instead the video just does not load. Why is this?
You are using fancybox v2.x with options for fancybox v1.3.x (they are not compatible with each other.)
Your best bet is to get rid of this script :
<script type="text/javascript">
$(".videobox").click(function () {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
</script>
and try this instead :
<script type="text/javascript">
$(document).ready(function () {
$(".videobox").fancybox({
width: 680,
height: 495,
type: "iframe"
}); // fancybox
}); // ready
</script>
notice that we are using type : "iframe" because you are using youtube embed mode
SIDE NOTE: You are loading two versions of jQuery (1.7.1 and 1.7.2) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.

Categories

Resources