2 Nivo Sliders on same page not working - javascript

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.

Related

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 :)

How to correctly insert references from jQuery, javascript and CSS in Bootstrap with ASP.NET WebForms

Okay, I'm working on a new personal project and I'm a beginner in Bootstrap.
What I'm trying to do for two days is; inserting dateTimePicker and number Incrementer using bootstrap techniques. And for doing this I searched a lot and tried many different tutorials, examples and none of those worked for me. I think that the problem should be the way of referencing the jquery libraries, javascripts and CSS. This is for the fact that I was trying to insert some glyphicons and they wouldn't appear to. So I'm asking how to correctly insert, arrange this libraries.
Here is what I have until now:
1) On my Site.Master in ASP.NET WebForms I have this references in the head Section:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<link href="Content/datepicker.css" rel="stylesheet" />
<link href="Content/prettify.css" rel="stylesheet" />
<!--
<link href="Content/slider.css" rel="stylesheet" />
<link href="Content/iThing.css" rel="stylesheet" />
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<!--
<link href="https://a0.muscache.com/airbnb/static/packages/common_o2.1-024e8f08a0bba6da7891dd4b6c39b7aa.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/p1/main-pretzel-f7ebfdaf120892e36656cf39bcc3addf.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/packages/autocomplete-dd80b94ccaa2e37d6c20412621a9aeac.css" media="screen" rel="stylesheet" type="text/css" />
-->
<!--
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-slider.js"></script>
-->
2) In my Default.aspx page, where I'm trying to insert the datetimePicker and the other things and this page is a WebForm with Master I have this part for DateTimePicker in this occasion:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
3) The Result that I'm getting is the following:
doesn't work and doesn't show the calendar icon to
At the end of Default.aspx i have also included this scripts:
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>
Somebody knows where I'm doing something wrong?
This guide created by Twinkle can help you set up your files properly: Bootstrap 3.0 with ASP.NET
As for a datepicker, I have used http://www.eyecon.ro/bootstrap-datepicker/
Here's a jsFiddle
HTML
<div class="well">
<input type="text" class="span2" value="02-16-2012" id="targetID" >
</div>
JS
$('#targetID').datepicker({
format: 'mm-dd-yyyy'
});

Keep getting object has no method error from javascript

I keep getting a Object has no method error when trying to call jwplayer's setup method or bootstraps carousel method.
I do have JQuery installed and it works properly, I can also use JS from bootstrap using data-attributes and regular jQuery works just not with these two.
Here is a fiddle http://jsfiddle.net/S9jDw/
I've been stuck with this for days.
this is my js code
$(document).ready(function() {
jwplayer('.jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});
and this is my html output
<!DOCTYPE html>
<html class='index'>
<head>
<title>Save Rosie</title>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- Use title if it's in the page YAML frontmatter -->
<link href="/stylesheets/fonts.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/bootstrap.js" type="text/javascript"></script>
<script src="http://jwpsrv.com/library/Xp3HoLIEEeOyYSIACmOLpg.js" type="text/javascript"></script>
<script src="/javascripts/all.js" type="text/javascript"></script>
<link href='https://s3-us-west-2.amazonaws.com/rosiesdonations/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<script src=''></script>
</head>
<body>
<div class='wrapper'>
<div id='image-wrapper'>
<aside class='left-side-image'>
<img alt='Side Image Left' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Left.gif'>
</aside>
<aside class='right-side-image'>
<img alt='Right Side Image' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Right.png'>
</aside>
</div>
<div class='container'>
<nav class='row main-header'>
<header class='col-md-12'>
<h1>Help Save Rosie</h1>
</header>
</nav>
<section class='row main-body'>
<div class='col-md-12'>
<div class='jw-wrapper'></div>
<div class='carousel slide' data-ride='carousel' id='main-carousel'>
<div class='carousel-inner'>
<div class='item active'>
<img alt='Rosie Picture one' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie1.png'>
</div>
<div class='item'>
<img alt='Rosie Picture two' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie2.jpg'>
</div>
<div class='item'>
<img alt='Rosie Picture three' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie3.jpg'>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
It looks like jwplayer is actually expecting the id of the element and not a selector.
Try changing class="jw-wrapper" to id="jw-wrapper" and change your setup method to:
$(document).ready(function() {
jwplayer('jw-wrapper').setup({
file: 'http://helpsaverosie.ca/Rosie.m4v',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
title: 'Rosie',
width: '100%',
aspectratio: '16:9',
mute: 'true',
autostart: 'true'
});
});

jQuery .data() not working along with .click

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>

Jquery NivoSlider Slider is not working $('#slider').nivoSlider(); is not a function

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();
});
});

Categories