Fancybox trouble: Image opens on first click in an unwanted place - javascript

I'm trying to show a list of images through fancybox. When each image is clicked, the image initially always appears in top right corner of the browser window. On the second click of the object, the image positions itself correctly. But in both cases the popped-up image is not styled with the usual border and close-symbol.
I followed the tutorial from:
http://tutvid.com/webdesign/dreamweaver/how-to-use-fancybox-jquery-tutorial/
And the result just doesn't add up.
How can I make the fancybox command work straight away from the first mouse click?
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
<head>
<link rel="stylesheet" href="js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="type/javascrript" src="js/fancybox/source/jquery.fancybox.pack.js"> </script>
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"> </script>
</head>
<body>
<a class="fancybox" href="images/atnight/image11.jpg">
<img src="images/atnight/image11.jpg" width="620" /></a>
<a class="fancybox" href="images/atnight/image10.jpg">
<img src="images/atnight/image10.jpg" width="620" /></a>
</body>
Hope somebody can help :-)

<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="type/javascrript" src="js/fancybox/source/jquery.fancybox.pack.js"> </script>
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"> </script>
</head>
<body>
<a class="fancybox" href="images/atnight/image11.jpg">
<img src="images/atnight/image11.jpg" width="620" /></a>
<a class="fancybox" href="images/atnight/image10.jpg">
<img src="images/atnight/image10.jpg" width="620" /></a>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>

Related

JS function works on console, but not in code

When I run $('#slides').superslides() in my console my function works properly, however when I run it in a separate JS file it displays nothing.
$(document).ready(function() {
$('#slides').superslides();
});
File is correctly referenced in script
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Brandon Bracho</title>
<link rel="stylesheet" href="CSS/superslides.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="slides">
<div class="slides-container">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
<script src="Javascript/jquery.superslides.min.js"</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="Javascript/script.js"</script>
</body>
</html>
it should not work, u have typo on your script
<script src="Javascript/jquery.superslides.min.js"</script>
you are not closing the start tag, please close it:
<script src="Javascript/jquery.superslides.min.js"></script>
and also your reference to your script Javascript/script.js maybe invalid as it is mean an absolute path, please check it on the browser console (check if it is loaded)

popup image not working in html using jquery

In the below code I am displaying a gallery that contains images. When I click on an image, I want to show the same image in a popup, and I also want to show the next and previous images. Any idea what my mistake was?
But it was displaying as a new window.
Can any one help me?
html
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<div id="Gallery">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="elgol sunset (matty brooks)">
<img src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" alt="" width="150" height="113" />
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Frondaisons (Valentin le luron)">
<img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg" title="The cold morning (Raimondas Ka.)">
<img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" width="150" height="113"/>
</a>
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Silhouettes (una cierta mirada)">
<img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" width="150" height="113"/>
</a>
</div>
</div>
<script type="text/jscript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Download these files from the url
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>-->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
By appending the url http://fancyapps.com/
e.g http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5
and then include all these files in your project folder.
It will work :)

External Javascript doesn't load when called

Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>

JQuery slideDown() not working

I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/

facebox is not working properly in scala

<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/facebox.js")" type="text/javascript"></script>
<link href="#routes.Assets.at("stylesheets/facebox.css")" media="screen" rel="stylesheet" type="text/css"/>
<script>
</script>
<body>
text
<div id="info" style="display:none;">
hello world
</div>
</body>
Facebox and div tag are not showing.I am beginner of ajax so please help me .
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})

Categories