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 :)
Related
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>
For some reason that I can not see, I have two nivo sliders on the same page that do not work. Help much appreciated. Below is the well known Nivo Slider code that I am adapting.
Header
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Nivo Slider 1
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/>
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/>
</div>
</div>
</div>
Nivo Slider 2
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider2">
<em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="Hello, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a caption" data-transition="fade" />
</em></div>
</div>
</div>
JavaScript
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({pauseTime:5000});
effect:'fade'
});
</script>
There are a few issues here.
You have duplicate IDs. I doubt this is the problem but it's bad practice.
You have <em> tags around your images in the 2nd slider.
Finally, you have incorrectly specified your effect parameter - this is most likely the cause of the issue
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({
pauseTime:5000,
effect:'fade'
});
});
Please change <div id="wrapper"> for one of the slider and then check.
Note: you shouldn't have same id's for both div's(not only divs) anytime.
I want to display the content of data-title of div with id="shirt" which is Shirt Front and alert when the button checkout is clicked. It does not work.
jQuery snippet:
var bandcolor='';
var facecolor='';
$("#shirt").click(function(){
bandcolor=$("#shirt").data("title");
});
$("#checkout-button").click(function(){
alert(bandcolor);
});
HTML snippet:
<div id="main-container" class="container">
<div id="content">
<div id="fpd">
<div class="fpd-product" id="shirt" data-title="Shirt Front" data- thumbnail="images/hoodie/Black.png">
<img src="images/hoodie/Black.png" data-title="Shirt Front" />
You can check out my web site at http://www.shivsample.comlu.com. The div with id="shirt" is the first image on the left hand panel.
The full html code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui- 1.9.2.custom.min.css" />
<link rel="stylesheet" type="text/css" href="css/spectrum.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner-fonts.css" />
<!-- Include js files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="js/spectrum.js" type="text/javascript"></script>
<script src="js/hammer.js" type="text/javascript"></script>
<script src="js/jquery.hammer.js" type="text/javascript"></script>
<script src="js/jquery.fancyProductDesigner.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var bandcolor='';
var facecolor='';
$("#shirt").click(function(){
bandcolor=$("#shirt").data("title");
});
$("#checkout-button").click(function(){
alert(bandcolor);
});
//call the plugin and save it in a variable to have access to the API
var fpd = $('#fpd').fancyProductDesigner({
editorMode: false,
fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Geneva', 'Fearless'],
//these are the parameters for the text that is added via the "Add Text" button
customTextParamters: {x: 210, y: 250, colors: "#000000", removable: true, resizable: true, draggable: true, rotatable: true}
})
.data('fancy-product-designer');
});
</script>
</head>
<body>
<div id="main-container" class="container" >
<div id="content">
<div id="fpd" >
<div class="fpd-product" id="shirt" data-title="Shirt Front" data-thumbnail="images/hoodie/Black.png">
<img src="images/hoodie/Black.png" data-title="Shirt Front" />
</div>
<div class="fpd-product" id="shirt2" data-title="Shirt Front1" data-thumbnail="images/hoodie/Camo.png">
<img src="images/hoodie/Camo.png" title="Base Front" />
</div>
<div class="fpd-design">
<img src="images/designs/swirl.png" title="Swirl" />
<img src="images/designs/swirl2.png" title="Swirl 2" />
<img src="images/designs/swirl3.png" title="Swirl 3" />
</div>
</div>
<div class="api-buttons clearfix" style="text-align: right;">
Print
Checkout
<span class="pull-right price badge badge-inverse"><span id="thsirt-price"></span> $</span>
</div>
<div id="thsirt-output" class="output"></div>
</div>
</div>
</body>
</html>
I have been attempting to recreate the jQuery Cycle Plugin shown here. I am also using bootstrap 3. If I remove the line <script type="text/javascript" src="static/js/jquery.js"></script> then it works, however, I need this for my responsive nav-bar and really have no idea why it is doing this. Here is the source code: and the live page is here. I have been trying for several hours to get this and have just hit a brick wall.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" />
<link href="static/css/bootstrap-theme.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="shortcut icon" href="./static/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="./static/images/favicon.ico" type="image/x-icon"><title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-home" href="./index.html" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="nav-resume"><a id="link" href="resume.html">Resume</a></li>
<li id="nav-projects"><a id="link" href="portfolio.php">Portfolio</a></li>
<li id="nav-contact"><a id="link" href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrap">
<div class="container">
<!--container is ended in footer tag.--><body>
<div class="slideshow">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>
</div>
</div>
<!--
<div id="footer">
<div class="container">
<p1 class="text-muted credit">© 2013 michaelwashburnjr.com</p1>
</div>
</div>
-->
<!-- Includes -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
</body>
</html>
[Edit] I am now using <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> instead of <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> and having the same error.
You are including jQuery twice in a way that is destroying the cycle plugin. You have:
<!-- include jQuery library --> // FIRST INCLUDE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> // SECOND INCLUDE
<script type="text/javascript" src="static/js/jquery.js"></script>
You should move all of your scripts to the bottom, and include them thusly:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="static/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
That way your second copy of jQuery doesn't destroy the plugins which were registered with the first copy.
The jQuery file you are loading is old, Bootstrap requires a higher version looking at their bower package "jquery": ">= 1.9.0"
https://developers.google.com/speed/libraries/devguide#jquery
I am using nivo jquery image slider in my asp.net application, but after page load its not changing the images and only showing "loading.gif" image, on jquery debugging i am getting error message : $('#slider').nivoSlider(); is not a function.
<link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider();
});
</script>
<style>
.theme-default #slider {
margin:1px auto 0 auto;
width:674px; /* Make sure your images are the same size */
height:311px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
/* margin-top:150px; */
}
.clear {
clear:both;
}
</style>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/cfgSliderImages/1.gif" alt="" />
<img src="images/cfgSliderImages/2.gif" alt="" title="Solar Power" />
<img src="images/cfgSliderImages/3.gif" alt="" data-transition="slideInLeft" />
<img src="images/cfgSliderImages/4.gif" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
Try this:
Maybe there is a conflict with jQuery, so use .noConflict():
var j = jQuery.noConflict();
j(document).ready(function () {
j('#slider').nivoSlider();
});
I get this problem when I'm using Visual Studio every now and then. Instead of referencing the scripts in the body, I add them in the head.
<head>
<link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
This has especially been a problem with jQuery as well.
However, you need to put your javascript in the document ready function:
// When the page is ready to be manipulated
$(function() {
$(window).load(function () {
$('#slider').nivoSlider();
});
});