Simple HTML Image Slideshow - javascript

I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry

I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

Related

Regarding HTML5

whenever i am attaching a image in HTML5 the image size is getting so large.I gave the height and width also but it is not changing
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body> style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
Firstly, there is a redundant < in your body tag.
Then, you can use width and height attributes as below in the img tag to specify the image size
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style="width:250px;">
<h1>Favorite
<Pic>
</h1>
<p> This is one of the favourite pics.</p>
<img src="https://via.placeholder.com/150" alt="My Favoutite Pic" width="100" height="100">
</div>
</body>
</html>
Use the height and width image attributes, like this:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite Pic</h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" width="150" height="150" alt="My Favoutite Pic">
</div>
</body>
</html>
Make sure to maintain the ratio of the length and width of the image, to keep the image looking good.
You are missing height and width tags on the img tag. The size of the div wont affect it. It might help if you set it to something like this
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0; background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" height="500" width="500" alt="My Favoutite Pic" >
</div>
</body>
</html>
The width and height are just an example, pick the one that is right for your image.
You had an extra ">" in your body tag. Your code should be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>

Video will not play when clicking poster attribute on Youtube video

I am trying to get my video to play when I click on the .gif.
I have tried multiple snipits, and coding it myself, but have not found a solution yet.
<div class="video" id="videoplayer">
<img src="images/gifisdone.gif">
<!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div>
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>
</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>

onclick embeded video , background music stop

My problem is exactly like this post
How to stop music when embedded youtube video starts?
But it doesn't solve my problem.
My html for music :
<audio id="myAudio" autoplay>
<source src="music/Morning-Sun.wav">
</audio>
embed video :
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
[edit]
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio'); aud.pause();">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
First of all, (aside from boohiss for having background music), you are better off to create a function rather than include a string of javascript in your html. You made the error of not defining 'thevid' as a variable, which i corrected. You weren't calling the audio at any point either to stop it, so i created a variable to find it by id, and pause it on video play.
Naturally my sound is different, and as it is short i have set it to loop, but you can easily amend this.
Hope this helps you out :)
var thevid=document.getElementById('thevideo');
var thumb=document.getElementById('thumb');
var playing = 1;
function playvid(){
thevid.style.display='block';
thumb.style.display='none'; document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio');
aud.pause();
playing = 0;
thevid.onended = function(){
aud.play();
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<audio id="myAudio" autoplay loop>
<source src="http://www.rachelgallen.com/monkey.mp3">
</audio>
<div class="video">
<div id="thumb">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" onclick='playvid();' />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
</body>
</html>

Javascript AppendTo speed and a href link

I wish to link different sites to the pictures.
All I did is link the pictures to the same link.
So I want to link each pictures to the different website.
<!DOCTYPE html>
<html>
<head>
<style>
#rectangle{
width:2500px;
position:absolute;
margin-left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
$('.crimson').first().appendTo('#rectangle a' );
}, 2000);
});
</script>
</head>
<body>
<div id="rectangle">
<a href="html/Main.html">
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" /></a>
</div>
</body>
</html>
So adding 'a' behind the appendTo rectangle is the best thing I can do.
Try wrapping each picture in to individual <a></a>
<img class="crimson"src="../pictures/CS151120.jpg"/>
<img class="crimson" src="../pictures/CS151204.jpg" />
<img class="crimson" src="../pictures/CS151218.jpg" />
<img class="crimson" src="../pictures/CS151231.jpg" />
$(document).ready(function () {
$('.crimson').css('width', 250);
setInterval(function () {
// $('.crimson').first().appendTo('#rectangle a');
}, 2000);
$('#rectangle .crimson').each(function () {
link = "html/Main" + $(this).index() + ".html";
$(this).wrap("<a href='"+link+"'/>");
});
});

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources