Known Participant

Question

Trying to make a slideshow gallery with autoplay and controls (select, pause, next, previous..).

Forum|Forum|4 years ago
January 20, 2022
5 replies
2888 views

Not sure I have the correct terms here, so here is a picture of a type of gallery which appeals to me - Mostly because it's simple and functional.

It's essentially the gallery that is described in W3 Schools at...

https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

But I would like to have this gallery autoplaying (like a slider) when the page opens while giving the reader the option of taking control to pause and select slides by the thumbnails or arrows.

Here is the HTML and JS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            href="d:/webs/helenavista/helenavista P12/css/global.css"
            rel="stylesheet"
            type="text/css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <style></style>
    </head>
    <body>
        <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB B O D Y BBBB -->
        <!--  -->
        <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%% SLIDESHOW-GALLERY 1 %%%%%%%%%%%%%% -->
        <!--  -->
        <hr class="thick" />
        <h3>{GAL1} Gallery 1</h3>
        <div class="gallery_1_container" style="width: 50%">
            <!-- ------------------------ SLIDES-START -->
            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">1 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-marlin_2011-12-15_112401.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">2 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_scenic-cristobal_2011-03-13_175353.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">3 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_suites-1-ph_2014-03-25_065533_012.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">4 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-pc_2011-03-12_151934.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">5 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_surf-carola_2018-12-21_072217_sc.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">6 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2007-08-18_153437.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">7 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2011-01-23_173030.jpg"
                    style="width: 100%"
                />
            </div>
            <!-- ------------------------ SLIDES-END -->
            <a class="gallery_1_prev" onclick="gallery_1_plusSlides(-1)">❮</a>
            <a class="gallery_1_next" onclick="gallery_1_plusSlides(1)">❯</a>

            <!-- ------------------------ CAPTION -->
            <div class="gallery_1_caption-container">
                <p id="gallery_1_caption"></p>
            </div>
            <!-- ------------------------------- THUMBNAILS -->
            <div class="gallery_1_row">
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-marlin_2011-12-15_112401.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(1)"
                        alt="Marlin"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_scenic-cristobal_2011-03-13_175353.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(2)"
                        alt="Leon Dormido"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_suites-1-ph_2014-03-25_065533_012.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(3)"
                        alt="Galeodan Penthouse Suite"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-pc_2011-03-12_151934.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(4)"
                        alt="Amberjack"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_surf-carola_2018-12-21_072217_sc.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(5)"
                        alt="Carola Surf"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2007-08-18_153437.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(6)"
                        alt="Tortoise"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2011-01-23_173030.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(7)"
                        alt="Blue Heron"
                    />
                </div>
            </div>
        </div>
        <!-- ------------------------------- SCRIPT -->

        <script>
            var gallery_1_slideIndex = 1;
            gallery_1_showSlides(gallery_1_slideIndex);

            function gallery_1_plusSlides(n) {
                gallery_1_showSlides((gallery_1_slideIndex += n));
            }

            function gallery_1_currentSlide(n) {
                gallery_1_showSlides((gallery_1_slideIndex = n));
            }

            function gallery_1_showSlides(n) {
                var i;
                var slides =
                    document.getElementsByClassName("gallery_1_Slides");
                var dots = document.getElementsByClassName("gallery_1_demo");
                var gallery_1_captionText =
                    document.getElementById("gallery_1_caption");
                if (n > slides.length) {
                    gallery_1_slideIndex = 1;
                }
                if (n < 1) {
                    gallery_1_slideIndex = slides.length;
                }
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(
                        " gallery_1_active",
                        ""
                    );
                }
                slides[gallery_1_slideIndex - 1].style.display = "block";
                dots[gallery_1_slideIndex - 1].className += " gallery_1_active";
                gallery_1_captionText.innerHTML =
                    dots[gallery_1_slideIndex - 1].alt;
            }
        </script>
        <!--  -->
    </body>
</html>

Rather than extract all the relevant parts of the css file, I have left that as a link online to the stylesheet that is used on several websites. I have also uploaded the file (global.css).

I am hoping that some additional Javascript will give me the functionality I am seeking. I know some will say "why bother - just use Bootstrap" but I really would like to do it the old-fashioned way. Speed is not a priority - I am my only client.

global.zip

This topic has been closed for replies.

B i r n o u

Legend

@Galeodan if I understand clearly your request, is that you would like to do it by yourself, without any help of libraries or any plugin out there...

if so, just let us know we could help you in your own script

GaleodanAuthor

Known Participant

@Galeodanif I understand clearly your request, is that you would like to do it by yourself, without any help of libraries or any plugin out there...
if so, just let us know we could help you in your own script

By @B i r n o u

Thanks Birnou. While I am open to all suggestions, that is what I was hoping for. I have some sliders on my sites and some thumbnail galleries. But what I would like to do, in some cases, is combine the two through JS. I described my "wish" in an earlier message to Osgood and I repeat it here as the thread is a little hard to follow:

"I hadn't thought of that aspect, so thanks for pointing it out. I would be fine with having a <Pause>/<Resume> control on the gallery - probably where the titles are. So would it be feasible to have 2 interchangeable scripts? The first one would be for autoplay \ sliding images, and the second would be for manually controlling the images via thumbnails and arrows. The page would open with the autoplay script sliding images and the user could click on <Pause> to reveal manual controls and activate the thumbnails. The manual script would have to start on the correct slide without a blink. You could have a <Resume> button to reverse the process and go back to sliding, but that would be of secondary importance.

My thinking is that its handy to have sliding images to display a series of images of, for example: local scenery. I want the reader to be able to enjoy all the images, with no effort, but allow them to pause and go back to any images that are of particular interest. I find my inability to do so on many sliders to be frustrating."

So I'm wondering if the code I have can be modified, supplemented, or replaced with code that will enable the behaviour described above.

B i r n o u

Legend

@Galeodan I'm so sorry for being later on that one, here at the office, there were crowds, traffic jams and intense activity... doubled by COVID (second episodic layer... )

So I don't know if you're still facing your issue...

well without having something optimised, here is a way to get solution on your play pause sliders...

first in your HTML Structure... add a new controller beside your next/prev command, the one to control the play pause statement

add a third line as

<!-- ------------------------ SLIDES-END -->
<a class="gallery_1_prev" onclick="gallery_1_plusSlides(-1)">❮</a>
<a class="gallery_1_next" onclick="gallery_1_plusSlides(1)">❯</a>
<a id="gallery_1_playpause" data-state="false" onclick="gallery_1_playpause(this)">Play</a>

the A tag contains an attribute (to catch the caller from script, a data-state attribute to contains the state value and a listener to point to the callback function)

then at the end of your HTML after your last current SCRIPT tag, add first a STYLE TAG (containg just the pointer) then a new SCRIPT tag, I will describe the role of this script just after

<style>
	#gallery_1_playpause {
		cursor:pointer;
	}

</style>
<script>
	var btn_playpause = document.querySelector('#gallery_1_playpause')
	var mvt_playpause
	var slide_duration = 1000
	function gallery_1_playpause(arg) {
		var state = btn_playpause.getAttribute('data-state') === 'true'
		state = !state
		btn_playpause.innerHTML = (state)?'Pause':'Play';
		btn_playpause.setAttribute('data-state', String(state));
		if(state){
		   mvt_playpause = setInterval(moveslide, slide_duration)
		} else {
		   clearInterval(mvt_playpause)
		}
	}
	function moveslide() {
		gallery_1_plusSlides(1)
	}
</script>

Three variables...

btn_playpause containing the node of the play pause command

mvt_playpause will contain the interval function caller

slide_duration define the slide duration in milliseconds

Two functions...

gallery_1_playpause...

before anything else... create, read and define a state variable (could be let instead of var) containg a boolean (true/false) state to know if the slider is currently on or off

this state is stored in a data-state HTML attribute of the command itself (by default in the HTML set as false, because the slider is off when the page load

first step: once read, one have to invert it... true becomes false, or false becomes true.. that the principle of a swap

second step: now is to change the text of the command... play or pause string using a ternary operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

third step... change the data-state value to the new state

fourth step; start or stop the automatic slider using an interval caller, calling a second external function, or clearing it

moveslide...

having an extenal second function as a callback, allow us to get more than one action possible if needed

so from there one can call your own next() function to move the slider on

you can get a demo, of this code, there

https://demo.puce-et-media.com/galeodan/slider-1.html

GaleodanAuthor

Known Participant

I'm guessing nobody has has tried running the code I posted above but I just noticed that it is not going to work for anyone else. I left the css link as a local file instead of one accessible from online.

href="d:/webs/helenavista/helenavista P12/css/global.css"

should be

href="http://www.helenavista.com/css/global.css"

Here is the corrected code...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
            href="http://www.helenavista.com/css/global.css"
            rel="stylesheet"
            type="text/css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <style></style>
    </head>
    <body>
        <!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB B O D Y BBBB -->
        <!--  -->
        <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%% SLIDESHOW-GALLERY 1 %%%%%%%%%%%%%% -->
        <!--  -->
        <hr class="thick" />
        <h3>{GAL1} Gallery 1</h3>
        <div class="gallery_1_container" style="width: 50%">
            <!-- ------------------------ SLIDES-START -->
            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">1 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-marlin_2011-12-15_112401.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">2 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_scenic-cristobal_2011-03-13_175353.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">3 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_suites-1-ph_2014-03-25_065533_012.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">4 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-pc_2011-03-12_151934.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">5 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_surf-carola_2018-12-21_072217_sc.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">6 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2007-08-18_153437.jpg"
                    style="width: 100%"
                />
            </div>

            <div class="gallery_1_Slides">
                <div class="gallery_1_numbertext">7 / 7</div>
                <img
                    src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2011-01-23_173030.jpg"
                    style="width: 100%"
                />
            </div>
            <!-- ------------------------ SLIDES-END -->
            <a class="gallery_1_prev" onclick="gallery_1_plusSlides(-1)">❮</a>
            <a class="gallery_1_next" onclick="gallery_1_plusSlides(1)">❯</a>

            <!-- ------------------------ CAPTION -->
            <div class="gallery_1_caption-container">
                <p id="gallery_1_caption"></p>
            </div>
            <!-- ------------------------------- THUMBNAILS -->
            <div class="gallery_1_row">
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-marlin_2011-12-15_112401.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(1)"
                        alt="Marlin"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_scenic-cristobal_2011-03-13_175353.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(2)"
                        alt="Leon Dormido"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_suites-1-ph_2014-03-25_065533_012.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(3)"
                        alt="Galeodan Penthouse Suite"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_fish-pc_2011-03-12_151934.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(4)"
                        alt="Amberjack"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_surf-carola_2018-12-21_072217_sc.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(5)"
                        alt="Carola Surf"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2007-08-18_153437.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(6)"
                        alt="Tortoise"
                    />
                </div>
                <div class="gallery_1_thumb" style="width: 14.28%">
                    <img
                        class="gallery_1_demo pointcursor"
                        src="http://www.helenavista.com/testgalleries/g1-home/carousel-g1-home_wl_2011-01-23_173030.jpg"
                        style="width: 100%"
                        onclick="gallery_1_currentSlide(7)"
                        alt="Blue Heron"
                    />
                </div>
            </div>
        </div>
        <!-- ------------------------------- SCRIPT -->

        <script>
            var gallery_1_slideIndex = 1;
            gallery_1_showSlides(gallery_1_slideIndex);

            function gallery_1_plusSlides(n) {
                gallery_1_showSlides((gallery_1_slideIndex += n));
            }

            function gallery_1_currentSlide(n) {
                gallery_1_showSlides((gallery_1_slideIndex = n));
            }

            function gallery_1_showSlides(n) {
                var i;
                var slides =
                    document.getElementsByClassName("gallery_1_Slides");
                var dots = document.getElementsByClassName("gallery_1_demo");
                var gallery_1_captionText =
                    document.getElementById("gallery_1_caption");
                if (n > slides.length) {
                    gallery_1_slideIndex = 1;
                }
                if (n < 1) {
                    gallery_1_slideIndex = slides.length;
                }
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(
                        " gallery_1_active",
                        ""
                    );
                }
                slides[gallery_1_slideIndex - 1].style.display = "block";
                dots[gallery_1_slideIndex - 1].className += " gallery_1_active";
                gallery_1_captionText.innerHTML =
                    dots[gallery_1_slideIndex - 1].alt;
            }
        </script>
        <!--  -->
    </body>
</html>

I have uploaded the css file again - in case.

Nancy OShea

Community Expert

What you want is a Carousel with a Thumbnail Gallery.

So combine what you have now with a Carousel

https://freefrontend.com/javascript-carousels/

Nancy O'Shea— Product User & Community Expert

GaleodanAuthor

Known Participant

What you want is a Carousel with a Thumbnail Gallery.
So combine what you have now with a Carousel
https://freefrontend.com/javascript-carousels/

By @Nancy OShea

You may be right - I have to admit I find even the nomenclature rather confusing and am not always sure what is meant by:

Carousel
Slideshow
Slider
Gallery

Sometimes the terms appear interchangeable or perhaps they are simply not used consistently. Can you help?

osgood_

Legend

What you want is a Carousel with a Thumbnail Gallery.
So combine what you have now with a Carousel
https://freefrontend.com/javascript-carousels/

By @Nancy OShea

You may be right - I have to admit I find even the nomenclature rather confusing and am not always sure what is meant by:
Carousel
Slideshow
Slider
Gallery
Sometimes the terms appear interchangeable or perhaps they are simply not used consistently. Can you help?

By @Galeodan

I would say a 'Carousel and a Slider' could be classified as images which animate from right to left and are infinite or animate the images from left to right and are infinite.

A 'Gallery and a Slideshow' could be classified as images that fade in and out and are infinite.

Of course there are lots of combinations possible and yes I think the terms can be mis-interpreted or interchangable.

Nancy OShea

Community Expert

WOWSlider

https://wowslider.com/

Project Seven Extensions for Dreamweaver

https://www.projectseven.com/

Nancy O'Shea— Product User & Community Expert

GaleodanAuthor

Known Participant

Thanks Nancy. I used a slidemaker app for a few years on my websites but it become steadily less useful as HTML4 changed to 5 and Flash died. I looked for a replacement but never found anything that looked better than just learning to do it myself. I'm pretty sure I looked at WOW Slider in my earlier searches but don't recall why I didn't give it a try. Perhaps because, at that time, it appeared to be sliders only and not controllable galleries, or a mixture of both - Which is what I want. I looked at a few of the samples and they don't seem to allow the user to pause the sliding, other than for a few seconds. If I download the demo, perhaps I will find the option in there somewhere.

BenPleysier

Community Expert

Just Bing the subject and you will see a multitude of solutions. One such a search gave me this

https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/

I know some will say "why bother - just use Bootstrap" but I really would like to do it the old-fashioned way. Speed is not a priority - I am my only client.

By @Galeodan

If you mean that the old fashioned way is to copy someone else's code and then use it, then yes, Bootstrap eliminates the copying part. You just go ahead an use it.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

osgood_

Legend

Bootstrap eliminates the copying part. You just go ahead an use it.

By @BenPleysier

No it doesn't. Copying code from the Bootstrap website is just the same as copying from any other website. Using a snippet is just the same, it's all copied code.

I'd encourage anyone if they are in it for the long run or just interested in learning to invest time writing their own code or attempt to write it. It's the only way you're going to get anywhere in the web-developement world, unless you want to be some poorly paid lemming churning out £500 quid websites for a living.

Of course this is all hypothetical as I doubt the majority in this forum have any such interest or intention other than building for personal use and then yes it's a free for all, use anything you like, who cares.

BenPleysier

Community Expert

https://www.youtube.com/watch?v=CWzrABouyeE

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded