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.
21
Replies
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.
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.
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?
By @Galeodan
Yes, all that is possible. No real need for 2 scripts, it could all be controlled by the one script and a bit of javascript voodoo magic.
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?
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.
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
well, there is no really such an international definition fro that purpose, each one of us goes for his own way... so some years ago I did a online training about galeries, sliders and carroussels... so befor going further in the training I gave my own definition for that... so
- left top corner is a carroussel... spinning around itself
- right top corner a galery... where you can display by cliking on appropriate view
- bottom left a slider where each slides , slides on each other to display
@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.
AdChoices