Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, hovering over Picture C should pause the looping, and upon unhovering, it should resume from Picture C onwards. I am unsure of how to implement this feature and would appreciate any advice or similar examples. Thank you.
Just finished this for you, hope it meets your needs. (Please note: the test images used were sized at 200px x 200px).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$(document).ready(function() {
var currentImg = 1,
totalImages = 4
loopTime = 1000,
intervalId = null;
function displayTitle(imgNbr) {
$('.title').hide();
$('#image'+imgNbr).prev('div').show();
}
$('img').on('mouseover', function() {
clearInterval(intervalId);
displayTitle($(this).parent().attr('id').substring(5));
}).on('mouseout', function() {
currentImg = $(this).parent().attr('id').substring(5);
startLoop();
})
function startLoop() {
intervalId = setInterval(function() {
displayTitle(currentImg);
currentImg = ((currentImg == totalImages) ? 1 : parseInt(currentImg)+1);
}, loopTime);
}
startLoop();
});
</script>
<style>
.imgcontainer {
margin: 10px;
float: left;
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 70px;
left: 60px;
color: #ffffff;
display: none;
}
.img {
clear: both;
}
</style>
</head>
<body>
<div class="imgcontainer">
<div class="title">title 1</div>
<div class="img" id="image1"><img src="images/image1.jpg" /></div>
</div>
<div class="imgcontainer">
<div class="title">title 2</div>
<div class="img" id="image2"><img src="images/image2.jpg" /></div>
</div>
<div class="imgcontainer">
<div class="title">title 3</div>
<div class="img" id="image3"><img src="images/image3.jpg" /></div>
</div>
<div class="imgcontainer">
<div class="title">title 4</div>
<div class="img" id="image4"><img src="images/image4.jpg" /></div>
</div>
</body>
</html>
Make sure to incorporate a rotating "Carousel" into your website design.
If you are comfortable with JQuery, consider using CarouFredSel as it is a highly recommended option - check out this example.
Alternatively, if you prefer JavaScript, the Conveyor Belt Slideshow Script could be another great choice for you.
In his response, @Asif highlights the wide range of JavaScript components available for this particular purpose.
Personally, I have utilized the Lightbox Image Viewer v2.03a developed by Dynamic Drive on several occasions (although it may not align perfectly with your requirements). Nonetheless, there are numerous other options to explore on that website, one of which may suit your needs perfectly.
Currently, I am encountering the error message: Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'classList') while utilizing the Carousel component. The problem arises when I attempt to populate the carousel with images ...
I have a special filter that alters the objects being filtered. However, when I apply ng-style="item.gridSize", it triggers my custom grid algorithm. This algorithm was adapted for my requirements from a source found at this link. angular.module("custom.m ...
After creating an HTML script using angular, I was able to successfully display the names in an array as shown below. <div ng-repeat="namep in names"> <li>Name : <span ng-bind="namep.name"></span></li> <li>Age : ...
Although there are similar questions out there, I'm facing a different issue. I am trying to obtain an access token from Spotify API, but all I keep getting is the dreaded "invalid redirect uri" error. Below is my API call: const request = require(& ...
Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...
I am currently working on an AJAX code that sends data to PHP and then receives data from PHP... function updateDatabase(syncData){ $.ajax({ type : 'POST', async: false, url : 'php/syncData.php', ...
Hey there, I've got a JavaScript array of URLs in my content.js file. I want to show these URLs in separate input boxes on a different page called display.php. Each input box will have edit and delete buttons. Any changes made by the user should updat ...
I'm having an issue where form.parse() is never called. When I delete bodyparser, my session variable throws an error. How can I resolve this and make it work? logcat The write(string, encoding, offset, length) method is deprecated. Use write(st ...
PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...
Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...
Is it possible to use both destructuring and props in React? For instance, can I have specific inputs like name and age that are directly accessed through destructuring, while also accessing additional inputs via props? Example The desired outcome would ...
While I am quite familiar with coding in JavaScript, the benefits of promises in the JS world still seem somewhat unclear to me. Below is an example of asynchronous calls using callbacks nested within each other. (function doWorkOldSchool() { setTime ...
When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...
Hello there! I am trying to create a form underneath the box labeled "New Referral," but I'm having trouble figuring it out. I would like to include sections for first name, last name, date of birth, phone number, email, and address under the box. Any ...
Here's an example of HTML code that I am working with: <button id="toolbar-item-17-update-id" type="submit" name="action" value="update" class="button-action-update btn btn-secondary"> Ed ...
Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...
There is a request in my server.js file var Post = require('./../models/post'); //GET ALL POSTS app.get('/api/posts', function (req, res) { Post.getPosts(function (err, posts) { if(err) { throw err; } ...
In my current project, I am developing multiple healthcare industry dashboards that require the functionality to generate PDF documents directly from the screen. These dashboards do not involve typical CRUD operations, but instead feature a variety of char ...
I'm curious about how to create a button press effect using JQuery. One idea I had was to use a mouse click event to change the image to a pressed state and then return it back to its original state when the mouse is released. Do you have any thought ...
I am having trouble adjusting the width of my header's columns to be 24vw, 24vw, 4vw, 24vw, and 24vw respectively. Despite specifying these widths, the browser is rendering all columns with equal width. Specifically, I am unable to change the width of ...