How to make a slideshow in javascript - javascript

Im trying to make a slideshow with these images:
Whenever I try this, it gets stuck on first image.
<div id="slideshow">
<img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla">
<img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin">
<img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station">
<img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet">
<img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta">
<img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad">
<img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna">
<img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras">
</div>
Im not sure what part of the code is messing up, but here it is.
Javascript:
<script type="text/javascript">
var hovering = false;
var slideshow = $("#slideshow");
slideshow.mouseenter(function() {
hovering = true;
}).mouseleave(function() {
hovering = false;
slideShow();
});
function slideShow() {
if (!hovering) {
var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
currentImg.delay(1000).fadeOut(500, function() {
nextImg.fadeIn(500, function() {
setTimeout(slideShow, 1000);
});
});
}
}
$(document).ready(function() {
slideShow();
});
</script>

Use cycle.js
http://jquery.malsup.com/cycle/
$('#slideshow').cycle();

<html>
<head>
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>
<script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});
</script>
</head>
<body>
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
</div>
<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />
<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>
</body>
</html>

There are many fancy light weight image slideshow plugins available in Jquery.
Check
http://wowslider.com/rq/jquery-images-slider/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

Related

creating a clickable image and applying an click event listener to it

I am trying to make a website where there are portraits of people and a user will be able to click on a portrait to see more information about that person. There will a text box underneath that will change text description when each profile is clicked.
I am trying to make the image a button of sorts then apply a click event via java script to change description text text.
The following code i have is:
HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<link rel="stylesheet" type="text/css" href="Styles.css" />
<script src="Scripts/jquery-3.3.1.intellisense.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<header>
<img src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
<h1 id="title">
CompTech Inc. 2018 Conference
</h1>
</header>
<nav id="navbar">
<span>
Home
Program
About
Registration
Sitemap
</span>
</nav>
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<button id="jim" class="profile"></button>
<button id="arcturus" class="profile"></button>
<button id="sarah" class="profile"></button>
<button id="jaina" class="profile"></button>
<div id="descriptioncontainer">
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</div>
</section>
</article>
</div>
</main>
<footer>
<img src="Images/Logo.png" id="logofooter" class="logo" alt="CompTech Logo" />
<p>
<strong>© Copyright CompTech Inc.</strong> <br />
<address>123 Knotareal Pl, Sydney CBD, NSW, 2018</address>
customerservice#comptech.org <br />
(02) 6258 7412
</p>
</footer>
<script src="About.js"></script>
</body>
</html>
JS
(function clickEvent() {
var portraits = document.getElementByClassName("profile");
var counter;
for (counter = 0; counter < profile.length; counter++) {
portraits[counter].onclick = function () {
}
}
})
CSS
button.profile.active, button.profile:hover {
cursor:pointer;
}
.profile {
width: 250px;
height: 250px;
display: inline-block;
margin-top:2%;
}
#jim {
background-image: url('Images/JimRaynor.png');
}
#arcturus {
background-image: url('Images/ArcturusMensk.png');
}
#sarah {
background-image: url('Images/SarahKerrigan.png');
}
#jaina {
background-image: url('Images/JainaProudmore.png');
}
#descriptioncontainer {
border-style:solid;
border-color:whitesmoke;
padding:5px;
min-height:100px;
}
Am I on the right track and where do go from here?
any help would be appreciated
You can assign an id to your image like this :
<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
and then in the javasript you can get the element by its ID and assign it a click event like this :
document.getElementById("myImage").onclick = function() {
//your code here
}
EDIT :
In your case, what you can also do is replace all your <button> tags by <img> tags with the source of your image and a call to a javascript function to replace the description by sending it in argument directly in the img tag attributes.
For exemple :
In the html, do this for all your profiles :
<img src="Images/JimRaynor.png" onclick="changeDescription('Write the description of Jim HERE')"/>
And in the javascript, you can write a single function that receive a string in argument and change the description in your page :
function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}
#Math Thanks for your help, your solution worked perfectly. However I kept playing with it and came up with this:
HTML5
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<img src="Images/ArcturusMensk.png" id="arcturus" class="profile" />
<img src="Images/JainaProudmore.png" id="jaina" class="profile"/>
<img src="Images/JimRaynor.png" id="jim" class="profile"/>
<img src="Images/SarahKerrigan.png" id="sarah" class="profile"/>
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</section>
</article>
</div>
</main>
JS
(function () {
var profiles = document.getElementsByClassName('profile');
var counter;
var description;
for (counter = 0; counter < profiles.length; counter++) {
profiles[counter].onclick = function () {
description = this.id;
switch (description) {
case 'jim':
document.getElementById('description').innerHTML = "text";
break;
case 'arcturus':
document.getElementById('description').innerHTML = "text";
break;
case 'sarah':
document.getElementById('description').innerHTML = "text";
break;
default:
document.getElementById('description').innerHTML = "text.";
break;
};
};
}
})();
First of all, I think you should use type attribute when use a button tag. And second, I think you can use <a> tag instead of button and call function on it with a parameter that will carry the name of the portrait so that you can use that parameter as condition in the function and change the description text. Follow this:
Here is the HTML:
<main>
<div id="container">
<article>
<section id="personnel">
<h2>Personnel</h2>
<p>Find out more about the staff that you will be meeting at the event</p>
<div id="descriptioncontainer">
<p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
</div>
</section>
</article>
</div>
</main>
Here is the function:
function changeDescription(name) {
var descriptionTag = document.getElementById('description');
if(name == 'jim') {
descriptionTag.innerText = 'This is jim';
}
else if(name == 'arcturus') {
descriptionTag.innerText = 'This is arcturus';
}
}
And so on.. I hope you got my point.

zoom image href values is not setting

I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change
function setImage(source) {
// console.log(source);
$('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
$('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
console.log($('#zoom_img').attr("href"));
$('.easyzoom').easyZoom();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a id="zoom_img" href="">
<img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
</a>
</div>
You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:
//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api = easyzoom.data ('easyZoom');
//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {
//std_src = the source to your standard-image (small verison)
//zoom_src = the source to your zoom-image (big version)
api.swap (std_src, zoom_src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>
<br><br>
<div class="easyzoom easyzoom--overlay">
<a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
<img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
</a>
</div>

Javascript Performance for Dynamic Image Resouce?

I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`

Why the image is not changing when I put mouse over it

Here in the line where the image team.gif is set, I have set events onmouseout and onmouseover, but both are not working. Image is not changing, when I put mouse over it. Please help me.
<div id="about" style="position:absolute;top:1310px;width:1340px;height:655px;background-color:black;opacity:0.9">
<div style="position:absolute;top:140px;left:630px;border:thin solid #03c1cb;width:2px;height:460px " >
</div>
<img src="mission.gif" alt="mission" style="position:absolute;top:1400px;right:430px" />
<img src="vision.gif" alt="vision" style="position:absolute;top:1570px;right:420px" />
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="lighton(this)" onmouseout="lightof(this)" />
<img src="3.gif" alt="light" id ="light"style="position:absolute;top:1360px;right:15px" />
</div>
my javascript code is here
<script>
lighton(x)
{
x.src="team1.gif";
}
lightof(x)
{
x.src="team.gif";
}
</script>
In your script you need to add the function keyword.
<script>
function lighton(x)
// ^^^^^^^^
{
x.src="team1.gif";
}
function lightof(x)
//^^^^^^^^
{
x.src="team.gif";
}
</script>
<img src="team.gif" alt="team" style="position:absolute;top:1610px;right:360px;z-index:100" onmouseover="this.src='team1.gif'" onmouseout="this.src='team.gif'" />
Fiddle https://jsfiddle.net/8wx8r9za/

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.
I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.
Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>
create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);
Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.
Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>

Categories

Resources