The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Slideshow
Mattab0lism
post Jun 16 2018, 05:57 AM
Post #1





Group: Members
Posts: 5
Joined: 16-June 18
Member No.: 26,660



Hi everyone, i'm making a site with a slideshow and have all my images in one folder "images" same heirahcy as the html

<div style="position: relative; left: 50%; ">
<img id="myButton" src="images/2.png" width= 900 style="background-color: white;"/>
<script type="text/javascript">
var images = ['images/chaos1.png', 'images/chaos2.png', 'images/chaos3.png', 'images/chaos4.png', 'images/chaos5.png', 'images/chaos6.png', 'images/chaos7.png', 'images/chaos8.png'],
i = 1;

// preload
for (var j=images.length; j--wink.gif {
var img = new Image();
img.src = images[j];
}

// event handler
document.getElementById('myButton').addEventListener('click', function() {
this.src = images[i >= images.length - 1 ? i = 0 : ++i];
}, false);
</script><br><br>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mattab0lism
post Jun 16 2018, 12:23 PM
Post #2





Group: Members
Posts: 5
Joined: 16-June 18
Member No.: 26,660



SOLVED:

<div id="imageGallery1"style="position: relative; left: 25%; ">
<img id="image1" src="images/Asset%201@2x.png"/>
<div id="previous" style="color: black; text-shadow: 2px white; position: relative"><img src="images/Previous.png" style="top: 50%;"></div>
<div id="next" style="color: black; text-shadow: 2px white;position: relative; left:50%; top: 40%;"><img src="images/Next.png"></div>


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
$( document ).ready(function() {

var images = [

src="images/tribe/Asset 2@2x.png",
src="images/tribe/Asset 3@2x.png",
src="images/tribe/Asset 4@2x.png",
src="images/tribe/Asset 5@2x.png",
src="images/tribe/Asset 6@2x.png",
src="images/tribe/Asset 7@2x.png",
src="images/tribe/Asset 8@2x.png",
src="images/tribe/Asset 9@2x.png",
src="images/tribe/Asset 10@2x.png",
src="images/tribe/Asset 11@2x.png",
src="images/tribe/Asset 12@2x.png",
src="images/tribe/Asset 13@2x.png",
src="images/tribe/Asset 14@2x.png",
src="images/tribe/Asset 15@2x.png",
src="images/tribe/Asset 16@2x.png",
src="images/tribe/Asset 17@2x.png",
src="images/tribe/Asset 18@2x.png",
src="images/tribe/Asset 19@2x.png",
src="images/tribe/Asset 20@2x.png",
src="images/tribe/Asset 21@2x.png",
src="images/tribe/Asset 22@2x.png",
src="images/tribe/Asset 23@2x.png",
src="images/tribe/Asset 24@2x.png",
src="images/tribe/Asset 25@2x.png",
src="images/tribe/Asset 26@2x.png",
];

var imageIndex = 0;

$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image1").attr('src', images[imageIndex]);
});

$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image1").attr('src', images[imageIndex]);
});

$("#image1").attr(images[0]);

});
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:45 PM