I've be working on a website which already has CSS elements and have tried to put a slider in a small css box, but isn't working for some reason. I'm using Jquery from Google API which i linked in the head tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="mystyle.css" type="text/css"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!---Link to Jquery Library--->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function slider() {
$(".slider#1").show("fade",500);
$(".slider#1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setinterval(function(){
$(".slider#"+count).show("slide",{direction:'right'},500);
$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);
if (count ==sc){
count=1;
}else{
count=count+1;
}
},6500);
}
</script>
</head>
<body onload="slider();">
<div id="RightColContainer">
<div id="RightColContent">
<div class="slider">
<img id="1" src="Slider/Image/Image1.jpg" border="0" alt="Razer Keyboard"/>
<img id="2" src="Slider/Image/Image2.jpg" border="0" alt="Microsoft Office"/>
<img id="3" src="Slider/Image/Image3.jpg" border="0" alt="Razer Mouse"/>
</div>
</div>
</div>
Try to wrap your code inside $(window).load(function() {....}) and remove the function slider from onload function of your body.
$(window).load(function () {
$(".slider#1").show("fade", 500);
$(".slider#1").delay(5500).hide("slide", {
direction: 'left'
}, 500);
var sc = $(".slider img").size();
var count = 2;
setinterval(function () {
$(".slider#" + count).show("slide", {
direction: 'right'
}, 500);
$(".slider#" + count).delay(5500).hide("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
});
Related
I created a page that show a gallery of images (imagenes.html):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="gallery"></div>
<div id="image"></div>
</body>
</html>
And the javascript code is (slider.js):
$(function() {
function loadSliderImage() {
var i, f, n;
for (i = 1; i < 49; ++i) {
n = ((i < 10) ? "0" : "") + i
f = n + "-120.JPG";
$("#gallery").append("<img src='images/cocinas/thumbs/" + f + "' rel=" + n + "></img>");
}
}
$("#gallery").on('click', 'img', function() {
$("#image").html("<img src='images/cocinas/small/" + $(this).attr("rel") + "-600.JPG' rel=" + $(this).attr("rel") + "></img>");
});
$("#image").on('click', 'img', function(e) {
var url = "images/cocinas/large/" + $(this).attr("rel") + "-980.JPG";
window.open(url, 'KitchenMaster', "width = 980, height = 670, scrollbars = no");
e.preventDefault();
});
loadSliderImage();
});
If I execute the imagenes.html, works fine but if I execute the page index.html that load the imagenes.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/km.js"></script>
<title>Gallery</title>
</head>
<body>
<div id="content"></div>
</body>
</html>
with the javascript code (km.js):
$(function() {
$("#content").load("imagenes.html");
});
the page imagenes.html not works fine (the javascript code slider.js does not run)
Can you help me?
Thanks in advance.
You are adding HTML inside HTML, it wont work, you can't have two head and body section in same HTML. instead in imagenes.html keep only those two divs 'gallery', 'image' and javascript stuff then load it in index.html
I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>
So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>
I'm using jQuery and HTML to make a slideshow, but I'm having some trouble: one image shows up, and the other slides don't. I can't figure out where the issue is. Has anyone experienced a similar issue?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Slider</title>
<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$('#img1').show("fade", 500);
$('#img2').delay(5500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider#"+count).show("slide", {direction:"right"}, 500);
$(".slider#"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" />
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" />
<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" />
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" />
</div>
</body>
</html>
Use this...
$(document).ready(function(){
$('#img1').show("fade", 500);
$('#img2').delay(500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$("#img"+count).show("slide", {direction:"right"}, 500);
$("#img"+count).delay(500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
});
And see this jSfiddle example
I'd like to change the buttons below used to change images to links/images instead. Any help would be appreciated! Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
onload = function() {
var buttonData = [
{src:'fareast.gif', href:'http://google.com'},
{src:'middlearth.jpg', href:'http://yahoo.com'},
{src:'europe.jpg', href:'http://chappo.cc'}
];
var $im1 = $("[name='im1']").click(function(){ window.open($(this).attr('href')); });
$(".imgSwap").each(function(i) {
var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
$b.click(function() { $im1.attr({src:d.src,title:$(this).html(),href:d.href}); });
if(i==0) { $b.click(); }
});
};
</script>
</head>
<body>
<img name="im1" height="300" width="300" /><br/>
<button class="imgSwap">Far East</button>
<button class="imgSwap">Middle Earth</button>
<button class="imgSwap">Europe</button>
</body>
</html>
Please Help!
First, the HTML:
<img src="path/to/image/far_east_button.gif" class="buttonImage" />
<img src="path/to/image/middle_earth.gif" class="buttonImage" />
<img src="path/to/image/europe.gif" class="buttonImage" />
Then, buttonData:
var buttonData = [
//titles added
{src:'fareast.gif', href:'http://google.com', title:'Far East'},
{src:'middlearth.jpg', href:'http://yahoo.com', title:'Middle Earth'},
{src:'europe.jpg', href:'http://chappo.cc', title:'Europe'}
];
Then, the click handler:
$(".imgSwap").each(function(i) {
var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
$b.click(function() {
$im1.attr({src:d.src, title:d.title, href:d.href});//note change to composition of title
return false;//Added to suppresses default hyperlink action of <a> links.
}).attr('title', d.title);
if(i==0) { $b.click(); }
});
Hope this will solve the Problem.
Do this
<script>
function changeImg(val)
{
if(val == 1)
{
document.getElementById('im1').src = "fareast.gif";
}
if(val == 2)
{ document.getElementById('im1').src = "middlearth.jpg";}
if(val == 3)
{ document.getElementById('im1').src = "europe.jpg";}
}
</script>
<img name="im1" id='im1' height="300" width="300" /><br/>
<button class="imgSwap" onclick="changeImg('1');">Far East</button>
<button class="imgSwap" onclick="changeImg('2');">Middle Earth</button>
<button class="imgSwap" onclick="{changeImg('3');">Europe</button>