I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Products
<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
<script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<center>
<div class="carousel-container"></div>
<div id="carousel">
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg">
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
</div>
</center>
I found there are multiple jQuery references in view.
<script src='../../Scripts/jquery-1.5.1.min.js'></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
Remove multiple jQuery references from the view.
Only one is enough.
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
Related
I'm trying to implement the Wallop slider: http://pedroduarte.me/wallop/
My ultimate goal is to have a another Wallop slider within another Wallop slider.
The problem occurs when I'm trying to set the options for the Wallop slider.
Without options it works as demonstrated here:
http://pinefallstudios.com/wallop/without_options.html
The code is:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);
function onClickNext() {
wallop.next();
}
</script>
</html>
However when I try to set itemClass and currentItemClass to something else it stops working as demonstrated here: http://pinefallstudios.com/wallop/with_options.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterOptions = {
itemClass: 'Wallop-outer-item',
currentItemClass: 'Wallop-outer-item--current'
}
var wallopEl = document.querySelector('.Wallop-outer');
var wallop = new Wallop(wallopEl, wallopOuterOptions);
function onClickNext() {
wallop.next();
}
</script>
</html>
I verified that the other options are being set correctly, as you can see in the console, as I'm only setting two options out of several.
What is causing this problem and how can I name my Wallop items so that I can use another inner slider?
Update
As explained by #HungCao it's probably due to the CSS rules.
However, how would one create an inner slider in this case?
This doesn't work as demonstrated here: http://pinefallstudios.com/wallop/with_inner.html
Code:
<html>
<head>
<script type="text/javascript" src="Wallop.js"></script>
<link rel="stylesheet" href="wallop.css">
<link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>
<!-- Outer Slide -->
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<h3>Inner Slider</h3>
<!-- Inner Slide -->
<div class="Wallop-inner Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item-current">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
<div class="Wallop-item">
<img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
</div>
</div>
</div>
</div>
<div class="Wallop-item">
<img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
<script type="text/javascript">
var wallopOuterEl = document.querySelector('.Wallop-outer');
var wallopOuter = new Wallop(wallopOuterEl);
var wallopInnerEl = document.querySelector('.Wallop-inner');
var wallopInner = new Wallop(wallopInnerEl);
function onClickOuterNext() {
wallopOuter.next();
}
function onClickInnerNext(){
wallopInner.next();
}
</script>
</html>
I think the problem is your new classes are overriding some css rules from the original one.
Look at these 2 blocks
Without options:
<div class="Wallop Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-item Wallop-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
With options:
<div class="Wallop-outer Wallop--slide">
<div class="Wallop-list">
<div class="Wallop-outer-item Wallop-outer-item--current">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
<div class="Wallop-outer-item">
<img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
</div>
</div>
</div>
Do you have any special css rule? Otherwise you should maintain their css rules.
can you tell me how to fix it on this code exactly? here I have two internal codes and two external (to youtube)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LS_model</title>
<link href="ls.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Image1" style="position:absolute;left:62px;top:291px;width:876px;height:524px;z-index:0;">
<img src="images/Background.png" id="Image1" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:75px;top:31px;width:840px;height:260px;z-index:1;">
<img src="images/ads.gif" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:126px;top:343px;width:140px;height:57px;z-index:2;">
<img src="images/videoss-b.gif" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:723px;top:344px;width:140px;height:56px;z-index:3;">
<img src="images/Photos-b.gif" id="Image4" alt=""></div>
</div>
</body>
</html>
Try this
Use window.open to open two pages and remove return false from your code.
<img src="images/Photos-b.gif" id="Image4" alt="">
For opening in a new tab, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY', '_blank');
And for opening internal, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY');
I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.
I have set up photoswipe for mobile device, it's working fine apart from the photos keep Flicker when swipe on the phone, but its working fine on computer. any idea how to fix please? cheers
the example will be:
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test/title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe)
{
$(document).ready(function()
{
$("#gallery a").photoSwipe(
{
enableMouseWheel: false,
enableKeyboard: false
});
$("#gallery a:first").click();
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
<script type="text/javascript">
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">Apartment Specialists</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Feature Apartments</li>
<ul data-role="listview" data-filter="false" id="test-more">
<div id="gallery" >
<a href="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=350x262&s=732bf1b52c70b0fc" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222204_46921.jpg?m=resize&o[geometry]=120x90&s=e4501ebdfd60d8db" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=350x262&s=293a3a114859a240" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222208_46921.jpg?m=resize&o[geometry]=120x90&s=c599ece1364cfafe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=350x262&s=da0802cfe1060df4" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222213_46921.jpg?m=resize&o[geometry]=120x90&s=f4b0ffaea30f6a2b" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=350x262&s=a54d15c8570f1d2b" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222218_46921.jpg?m=resize&o[geometry]=120x90&s=767b0330b9cf2f1e" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=350x262&s=9e2db11b4d87f798" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222223_46921.jpg?m=resize&o[geometry]=120x90&s=e9f8871520333fbe" alt="" /></a>
<a href="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=350x262&s=2cd999589c41d34d" > <img src="http://prod.computersforpeople.info/media/2012/12/03/222227_46921.jpg?m=resize&o[geometry]=120x90&s=1af459b7ecc85dbe" alt="" /></a>
</div>
<br />
<p align="center">
<font face="Arial, Helvetica, sans-serif">Back</font></p>
</ul>
<br />
<li>All Apartments</li>
</ul>
<div data-role="footer" align="center">
<h6 style="font-size: 55%;font-family:calibri">
RE/MAX Leaders Real Estate (1987) Ltd Licensed Under REAA 2008</h6>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
I just sort it. use code.photoswipe-3.0.5.min.js rather the version of 3.0.4. thanks
My carousel doesn't slide automatically. I can click through my pictures only.
The strange thing is that at one point I could of sworn it did work. I just dont know what I could have changed since.
Here's my code:
<div class="row-fluid">
<div id="slider" class="span5" style="padding:15px;" >
<div class="carousel slide" style="border:#fff 3px solid;" id="treatments">
<div class="carousel-inner">
<div class="item active">
<img src="img/sliderpic1.jpg" alt="massage">
</div>
<div class="item">
<img src="img/sliderpic2.jpg" alt="pedicure">
</div>
<div class="item">
<img src="img/sliderpic3.jpg" alt="waxing">
</div>
</div>
</div>
‹
»
</div>
<img src="img/logos.png" class="img-rounded">
</div>
Then just before the close body tag:
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Thanks in advance for all of your help, it's much appreciated!
You're setting up the carousel before you've included jQuery. Swap the <script> tags around:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 1200
});
</script>