This is what I have so far -
I cannot get my next link to work, but my previous link works after you change the pic by clicking on it. I'd like to take the "onclick" out and just use the next and previous links to change the pictures. I have 5 pictures and I can only get two to 'almost' work: - <!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>Townhouse</title>
-
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
-
<link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
-
<script type="text/javascript">
-
/* <![CDATA[ */
-
var curImage = "townhouse";
-
var cImages = [
-
'townhouse.jpg',
-
'townhouse2.jpg',
-
'townhouse3.jpg',
-
'townhouse4.jpg',
-
'townhouse5.jpg'
-
];
-
function townhousePics() {
-
if (curImage =="townhouse.jpg") {
-
document.images[0].src = "townhouse2.jpg";
-
curImage = "townhouse2";
-
}
-
else {
-
document.images[0].src = "townhouse2.jpg";
-
curImage = "townhouse2";
-
}
-
}
-
/* ]]> */
-
</script>
-
</head>
-
<body>
-
<table width="350">
-
<tr>
-
<td>Townhouse: <strong>$319,000</strong></td>
-
<td><a href="" onclick="self.close();">Close Window</a></td>
-
-
</tr>
-
</table>
-
<img src="townhouse.jpg" height="233" width="350"
-
onclick="townhousePics();" alt="photo of a townhouse" /><br />
-
<p>4 bed, 2 bath, 17,33 square feet, .42 acres</p>
-
<td><a href="" onclick="button;">Next</a></td>
-
<td><a href="" onclick="button;">Previous</a></td>
-
-
</body>
-
</html>
then you might use a simple logic that we already used in your previous thread here. you could use a counter to make use of the image-sources in the array: - var curImage = 0;
-
var cImages = [
-
'townhouse.jpg',
-
'townhouse2.jpg',
-
'townhouse3.jpg',
-
'townhouse4.jpg',
-
'townhouse5.jpg'
-
];
-
-
function townHousePics(direction) {
-
if (direction == 'next') {
-
curImage++;
-
-
if (curImage == 5) {
-
curImage = 0;
-
}
-
} else {
-
curImage--;
-
// even reset the counter here when
-
// its getting 0
-
}
-
-
document.images[0].src = cImages[curImage];
-
}
-
and in your links call the function like: - <a href="" onclick="townHousePics('next'); return false;">Next</a>
-
<a href="" onclick="townHousePics('previous'); return false;">Previous</a>
11  19279  gits 5,390
Expert Mod 4TB
so do you just want to use 2 pictures or more?
gits 5,390
Expert Mod 4TB
then you might use a simple logic that we already used in your previous thread here. you could use a counter to make use of the image-sources in the array: - var curImage = 0;
-
var cImages = [
-
'townhouse.jpg',
-
'townhouse2.jpg',
-
'townhouse3.jpg',
-
'townhouse4.jpg',
-
'townhouse5.jpg'
-
];
-
-
function townHousePics(direction) {
-
if (direction == 'next') {
-
curImage++;
-
-
if (curImage == 5) {
-
curImage = 0;
-
}
-
} else {
-
curImage--;
-
// even reset the counter here when
-
// its getting 0
-
}
-
-
document.images[0].src = cImages[curImage];
-
}
-
and in your links call the function like: - <a href="" onclick="townHousePics('next'); return false;">Next</a>
-
<a href="" onclick="townHousePics('previous'); return false;">Previous</a>
Thank you so much again! You are awesome, I really appreciate all the help!
gits 5,390
Expert Mod 4TB
no problem :) ... that's why we're here for ...
kind regards
@gits
Hi,
I have to put images in the folder. How can we implement this method?
gits 5,390
Expert Mod 4TB
what folder? you need to explain more what you want to achieve and what you have already - else any answer would just be guesswork.
@gits
As in the above code you took 5 images in the list right, for my work I have to take images from the systems file folder and use click next and previous links to change images.
gits 5,390
Expert Mod 4TB
well - the list is just the image's names in some folder since we setting the src-attribute of the img-element here. basically the names in the cImages-array are to be seen as paths to the corresponding images. in case you dont want to hardcode that list you would need to create that list programmatically - for example you could send a request where a serverside script would read the folder and returns the paths to fill in the array.
you could even go another way and write a service that passes the current image source and the 'direction' as params to the server and the server just delivers the next or previous image source. then this would be a request per click and then you set the src of the image with the response of your service.
oh ok I will try. thank you
HTML - <section id="modal">
-
<section class="modal-background">
-
<div class="close-btn">×</div>
-
<figure>
-
<img class="img-main" src="public/images/bird.jpg" alt="Bird on a tree">
-
</figure>
-
<figure class="modal-gallery">
-
<img src="public/images/bird.jpg" alt="Bird on a tree">
-
<img src="public/images/boat.jpg" alt="Boat at night">
-
<img src="public/images/dog.jpg" alt="Dog sitting">
-
<img src="public/images/fox.jpg" alt="Fox sitting">
-
<img src="public/images/island.jpg" alt="Island">
-
<img src="public/images/table-flowers.jpg" alt="Flowers on a table">
-
<img src="public/images/city.jpg" alt="Village during the day">
-
<img src="public/images/prague.jpg" alt="City of Prague at night">
-
<img src="public/images/ducks.jpg" alt="Ducks in a pond">
-
<img src="public/images/squirrel.jpg" alt="Squirrel in the snow">
-
<img src="public/images/lemon.jpg" alt="Lemon slice">
-
<img src="public/images/church.jpg" alt="Small church at night">
-
</figure>
-
<section class="modal-btns">
-
<button class="modal-btn prev-btn"><</button>
-
<button class="modal-btn next-btn">></button>
-
</section>
-
</section>
-
</section>
JS - // TOGGLE IMAGE GALLERY MODAL ON CLICK //
-
-
var imgOverlays = document.querySelectorAll(".imgs section div");
-
var mainImg = document.querySelector(".img-main");
-
var allModalImgs = document.querySelectorAll(".modal-gallery img");
-
var modal = document.querySelector(".modal-background");
-
var closeBtn = document.querySelector(".close-btn");
-
var opacity = 0.4;
-
-
function resetOpacity() {
-
for (i = 0; i < allModalImgs.length; i++) {
-
allModalImgs[i].style.opacity = 1;
-
}
-
}
-
-
document.querySelector("#gallery .imgs").addEventListener("click", function (e) {
-
for (i = 0; i < imgOverlays.length; i++) {
-
if (e.target == imgOverlays[i]) {
-
modal.style.display = "block";
-
mainImg.src = e.target.previousElementSibling.src;
-
}
-
}
-
});
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Marcel |
last post by:
Hello,
I'm working on a search application for my website. The website contains a
lot of pictures, and a search should return clickable thumbnails. No
problems there. My problem started when I...
|
by: Karl Roes |
last post by:
Hi All,
I would like some advice on Next / Previous record buttons.
I have a main form for the client, and a continuous subform listing
client transactions. If I open one of these transactions...
|
by: Gary |
last post by:
I have an example table with fields and records as shown below:
RECORD_ID DATE PRODUCT QUANTITY
1 4/1/05 widget1 50
2 4/2/05 widget1 48
3 ...
|
by: msnews |
last post by:
Hi All,
My client has following request. I am not sure how to do it.
Dynamically from database, we are getting set of images names. Now we want
to display them with next and previous buttons....
|
by: David |
last post by:
What I envision is this.
The user gets a set of records in a data grid
Then the user gets to select one of the rows to view the detail information
about the record. Then instead of backing...
|
by: Roger23 |
last post by:
I am trying to use a wizard for a mulit-process step where i have to
navigate to different screens. The user can see that in two modes,
read-only and update. when its read-only i want to hide the...
|
by: Reb |
last post by:
Hi all,
I have not successfully found a Javascript sample for getting next and
previous links from a file... I figured that someone must have solved
this problem already! ... here is what I'm...
|
by: shapper |
last post by:
Hello,
Is it possible to use images as Next / Previous buttons on an Asp.Net
2.0 GridView?
Thanks,
Miguel
|
by: GaryDean |
last post by:
I have a Wizard page and need to affect the next and previous buttons from
my code-behind. I've googled around and found two solutions, and neither
appear to work.
I can access the SideBarList...
|
by: mfaisalwarraich |
last post by:
hi everybody,
im trying to make next and previous buttons. im displaying record based on a search. when any image on the search results is clicked then dat image opened in a new page with details...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
