I am working on a website and my client wants an image slider where each slide links to a different page on the site. I would prefer if this were to stay in Javascript as I cant seem to wrap my head around jquery. Here is my code
Javascript code in the header
`<script type="text/javascript">
<!--
var img1 = new Image()
img1.src="DowntownEventNew.jpg"
var img2 = new Image()
img2.src="Shakespeare.jpg"
var img3 = new Image()
img3.src="DowntownConcertNew.jpg"
var img4 = new Image()
img4.src="Rangerettes.jpg"
//-->
</script>
HTML 5 and Javascript in the body
<div class="content">
<div id="slide">
<div class="slide_container">
<img src="DowntownEventNew.jpg" name="slide" />
<script type="text/javascript">
<!--
var pic =1
function slides() {
if (!document.images)
return
document.images.slide.src=eval("img" +pic+".src")
if (pic < 4)
pic++
else
pic =1
setTimeout("slides()",5000)
}
slides()
//-->
</script>
</div>
</div>
Use a plugin like Nivo Slider (that way you don't really need to develop the jQuery from scratch), and then wrap the image in an anchor tag <a>:
<div id="slider">
<img src="images/thing.jpg" alt="No Link" />
<img src="images/thing2.jpg" title="Link!" />
</div>
Related
On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!
The home page of my site has a container that holds square boxed with an image and a title. I changed some of those tiles to .gif images so once you hover over the image changes to another. There is not title anymore. The issue is when I load the page, the pictures that are gif do not load unless I hover over them. Once I hover over all, and do a page resize they all look fine.
Could it be because of the page resize function?
http://geranbaha.com/indextest.html
Can someone point out what I am doing wrong.
<script language="JavaScript">
<!-- Hide the script from old browsers -->
img0_on = new Image(311,235);
img0_on.src="upload/ketabmoghadas.gif";
img0_off = new Image(311,235);
img0_off.src="upload/ketabmogadasWeb.gif";
img1_on = new Image(311,235);
img1_on.src="upload/divine.gif";
img1_off = new Image(311,235);
img1_off.src="upload/divineculture.gif";
img2_on = new Image(311,235);
img2_on.src="upload/tv.gif";
img2_off = new Image(311,235);
img2_off.src="upload/rozaneh.gif";
img3_on = new Image(311,235);
img3_on.src="upload/radio.gif";
img3_off = new Image(311,235);
img3_off.src="upload/radio1.gif";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
//<! --End Hiding Here -->
html section
the commented part in this section is what it used to be and I replaced it with one line html code to show the gif images.
<div class="project-post web-design illustration">
<img src="ketabmogadasWeb.gif" border="0" name="img0">
<!-- <img alt="" src="upload/divineculture.jpg">
<div class="hover-box">
<div class="project-title">
<h2>فرهنگ الهی</h2>
<span>www.divine-culture.com</span>
<div><i class="fa fa-arrow-right"></i></div>
</div>
</div> -->
</div>
Put all of your javascript in
$( document ).ready(function() {
// Put all your image stuff here
});
And remove onmouseover="over_image('img0');" onmouseout="off_image('img0')"
Those onmouseover functions is what makes it change on a hover.
I've tried to build a website that will be half responsive means header+2 logos will not change as the window change its size but be fully sized.
And the 6 pictures will change their height+width as long as window.resize to fit the new window size.
I've tried this code but:
the header+2 logos are responsive too and i want them to be fully sized(as maximum browser width) all time.
the height and width are not compatible to the screen and its too big.
thanks for your advice how to fix.
CODE
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="first()">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).resize(changeImagesSize);
function first()
{
calc();
changeImagesSize()
}
function calc()
{
window.img11 = new Image();
window.img12 = new Image();
window.img13 = new Image();
window.img14 = new Image();
window.img15 = new Image();
window.img16 = new Image();
img11.src="1.jpg";
img12.src="2.jpg";
img13.src="3.jpg";
img14.src="4.jpg";
img15.src="5.jpg";
img16.src="6.jpg";
}
function changeImagesSize()
{
var img = document.getElementById('header1');
var heightheader = img.clientHeight;
var heightavailable=$('body').innerHeight()-heightheader;
var widthavailable=$('body').innerWidth();
var x=($(window).width()/screen.width);
var img1width=widthavailable*(img11.width/(img11.width+img12.width+img13.width+20));
var img2width=widthavailable*(img12.width/(img11.width+img12.width+img13.width+20));
var img3width=widthavailable-img2width-img1width-20;
var img1h=heightavailable*(img11.height/(img11.height+img14.height+heightheader+20));
var img2h=heightavailable*(img12.height/(img12.height+img15.height+heightheader+20));
var img3h=heightavailable*(img13.height/(img13.height+img16.height+heightheader+20));
$('#img1').width(img1width);
$('#img2').width(img2width);
$('#img3').width(img3width);
$('#img1').height(img1h);
$('#img2').height(img2h);
$('#img3').height(img3h);
var img4width=widthavailable*(img14.width/(img14.width+img15.width+img16.width+20));
var img5width=widthavailable*(img15.width/(img14.width+img15.width+img16.width+20));
var img6width=widthavailable-img5width-img4width-20;
var img4h=heightavailable*(img14.height/(img14.height+img11.height+heightheader+20));
var img5h=heightavailable*(img15.height/(img15.height+img12.height+heightheader+20));
var img6h=heightavailable*(img16.height/(img16.height+img13.height+heightheader+20));
$('#img4').width(img4width);
$('#img5').width(img5width);
$('#img6').width(img6width);
$('#img4').height(img4h);
$('#img5').height(img5h);
$('#img6').height(img6h);
}
</script>
<div id="header" style="position:relative;" >
<img id='header1' src="header.png" style="position:absolute; width:100%;"/>
<img id="logo1" src="logo1.png" style="position:absolute;left:30px;"/>
<img id="logo2" src="logo2.png" style="position:absolute; right:30px;"/>
</div>
<img id='img1' src="1.jpg"/>
<img id='img2' src="2.jpg"/>
<img id='img3' src="3.jpg"/>
<img id='img4' src="4.jpg"/>
<img id='img5' src="5.jpg"/>
<img id='img6' src="6.jpg"/>
<style>
body{overflow:hidden;}
img{height:auto;}
</style>
</body>
</html>
The arrangement should be
header with 2 logos pictures(not move) be fully all time
1 2 3 (one line)
4 5 6 (second line)
(the pictures)
should move and fit to window.
thanks a lot for help
you are trying to build a responsive website in completely wrong direction. You should use media queries and define width of your required width in percentages. in css you can define size of the logos in percentage which will change according to screen. if you want to learn how to build a good responsive site please comment if you have more question.
The page will display an image's url text correctly. But I am not sure how to assign the message to the img 's src to display the image.
<DIV class="msgStyle1" id="message">Waiting for image</DIV>
<div class="imgStyle1" id="message">
<img src=whatneedtogohere /></div>
function displayText(text) {
console.log(text);
document.getElementById("message").innerHTML=text;
window.castReceiverManager.setApplicationState(text);
};
Fixed HTML (switched classes and IDs to make IDs unique) and added an image ID for simplicity:
<div id="msgStyle1" class="message">Waiting for image</div>
<div id="imgStyle1" class="message">
<img src="" id="image" />
</div>
JS:
document.getElementById('image').src = 'http://yourImagePathHere';
See it work here: http://jsfiddle.net/N3rCm/
First off, you shouldn't have multiple Id's on the page, it'll mess with your JS.
Next I would give your image a class if you can
//jquery example of what you would do
var imgSrc = 'http://wherever/youre/getting/this/from';
$('.myimageclass').attr('src', imgSrc);
//non jquery
var myImg = document.getElementsByClassName('myimageclass')[0]; //assuming it's the first one
//or if you can uniquely identify it
var myImg = document.getElementById('imgId');
myImg.src = imgSrc;
I have been trying to create a basic JavaScript snipped to slide images forward and back on a webpage when links are clicked.
Here is my js code in the <head> section of the webpage:
<script type="text/javascript">
//if browser does noe support getElementbyId then exit
var step = 1;
if ( !document.getElementById ) {
return;
}
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
function slideForward()
{
//files are named as image1, image2....
step++;
var src = 'images/gallery_images/image'+step+'.jpg';
document.getElementById('photos').src = src;
}
function slideBack()
{
step--;
var src = 'images/gallery_images/image'+step'.jpg';
document.getElementById('photos').src = src;
}
</script>
I bind the 2 functions for moving backwards using onclick in a tag like:
<a onclick="slideBack()">
<img src="images/gallery_06.jpg" alt="" name="left" width="26" height="90" id="gallery_06" />
</a>
<a onclick="slideForward()">
<img src="images/gallery_07.jpg" alt="" name="right" width="27" height="90" id="gallery_07" />
</a>
Any suggestions on what I am missing? Nothing is being returned.