• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Slideshow HTML website click and next

Explorer ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

Hello, 

My personal website always worked that way that when you click on a picture it jumped to the next; like a slideshow. However, since a few weeks it doesn’t work that way any longer and all images popped up at the same time instead. I've adjusted it right now so you can at least scroll down, but my knowledge in HTML is very outdated unfortunately.  Does anyone you’ve got any idea what goes wrong initally and how to fix it? 
Any help is appreciated.

Thanks!
Y

 

Views

927

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

It appears your slideshow script was deleted from the server. But it appears to be from a server different than your own so it's possible you may need to find a replacement if the script you previously used is no longer being hosted.

 

Screen Shot 2021-06-03 at 4.58.47 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

1. jQuery Cycle is outdated.

2. You never should have referenced the script on GitHub because that's not a recognized CDN. 

3. Rebuild your slideshow with jQuery Cycle 2.  Download scripts directly from the source and upload them to your server.  See link below.

https://jquery.malsup.com/cycle2/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

Thank you. That sounds pretty far from my bed. I need to dig into this! Y

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

It's not difficult.  Use the code examples on the jQuery Cycle 2 site.

Post back if you need more help.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 03, 2021 Jun 03, 2021

Copy link to clipboard

Copied

Will do, thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Thanks for your help, but it's not my cup of tea I guess. I don't understand what I've got to copy/replace were in my original website in order to make it work again...  

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Replace what you have now with the code below.

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- made by www.metatags.org -->
    <meta name="description" content="an Amsterdam based Visual Creative using photography as his medium" />
    <meta name="keywords"
        content="Yaël Temminck, Yael Temminck, Amsterdam, photographer, photography, art, visual creative, image maker, film, zoo magazine, l'officiel hommes, glamcult, l'officiel, Wolf Alice, Theu Boermans, Eliphant, The Drums, The Garden, Michel Gondry, Kate Boy, Moderat, Slaves, Eliot Sumner, Trentemøler, Wende, Sandor Lubbe, Perfume Genius, lofficiel, fashion, LP, thomas azier, portraitphotographer, portrait, black and white, melancholic, John Cale, Johnny Marr, Skunk Anansie, Borns, Indie music, House of Orange, Art Director, Numero, Numero Homme, Numero Netherlands, Savages, La Femme, Paris Music, Rock musician, Portrait photographer, Music photographer, New Talent, Unseen, Marlon Magnee, independent, editorial, advertorial, high-end, chique, clean, dutch, anton corbijn, numero, new talent, newspaper photographer, portrait photographer, artist portrait" />
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="3 month">
    <title>Yaël Temminck</title>
    <!-- Visual Creative, Photographer, Amsterdam -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).pusharguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.rc=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-98744424-1', 'auto');ga('send', 'pageview');
    </script>
</head>
<body>
    <div class="container">
        <div class="row justify-content-between">
            <div class="col">
                <a href="mailto:info@yaeltemminck.com" class="btn">info[at]yaeltemminck.com</a>
            </div>
            <div class="col text-end">
                <a href="http://www.instagram.com/yaeltemminck" class="btn">instagram</a>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-6 offset-3">
                <div id="carousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="images/yaeltemminck01.jpg" class="d-block w-100" alt="image 1">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck02.jpg" class="d-block w-100" alt="image 2">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck03.jpg" class="d-block w-100" alt="image 3">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck04.jpg" class="d-block w-100" alt="image 4">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck05.jpg" class="d-block w-100" alt="image 5">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck06.jpg" class="d-block w-100" alt="image 6">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck07.jpg" class="d-block w-100" alt="image 7">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck08.jpg" class="d-block w-100" alt="image 8">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck09.jpg" class="d-block w-100" alt="image 9">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck10.jpg" class="d-block w-100" alt="image 10">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck11.jpg" class="d-block w-100" alt="image 11">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck12.jpg" class="d-block w-100" alt="image 12">
                        </div>
                        <div class="carousel-item">
                            <img src="images/yaeltemminck13.jpg" class="d-block w-100" alt="image 13">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
 
You will need to add the other images yourself.
 
Wat een prachtige auto. een Mercedes 450SL 6.9
Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Thank you so much Ben, this is a tremendous help!! Thanks. 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

PS. Is it also possible to get rid of these arrows? Or place them outside the image? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Delete:

 

  1.                     <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
  2.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  3.                         <span class="visually-hidden">Previous</span>
  4.                     </button>
  5.                     <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
  6.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  7.                         <span class="visually-hidden">Next</span>
  8.                     </button>
Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Thank you! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Your other script is here:

 

http://malsup.github.io/jquery.cycle.all.js

 

You just needed to change the link from .com to .io BUT as others have mentioned you need to download the script itself and link to it locally. Plus without any indication that you need to click on the images to loop through them, it's not clear what is supposed to happen so a self-revolving carosuel is probably a better idea or though it could be frustrating because a user may wish to stay longer on a particular image of interest to them, without the arrow buttons they are going to have to wait a long time to get back around to a particular image of interest, so I would recomend you re-instate the arrow buttons for better usability. I know the image is static IF you leave the cursor over the image but that's not obvious whereas the arrows are clear visual indicators.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

PS. I've uploaded the new code on my website. So you can see how it currently works... Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Hi Ben, 

Two more questions; hopefully you know how to fix it! I've adjusted some parts so it looks almost as it should.

1. The portrait / standing images are too big on the page. They don't fit in one window like the squared ones are. I don't like it that you've got to scroll to see an image. It needs to be visible at one page without scrolling (does that make sense?) 
Is it possible to adjust that?

2. Can I enlarge the invisible boxes of the 'previous' and 'next' button till they are both covering half of the page? So when you click on the right side, you go next, and when you click on the left side, you go back.

Is that possible? And if so, how?
Thanks a lot again!!
My best,

Y

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

What size display do you have?  What is your screen resolution?

 

On my device it looks fine, no scrolling needed.

image.png

 

All slideshows work best with images that are same size & aspect ratio.

 

For images of mixed size and aspect ratio, consider switching to a gallery & picture viewer like Fancybox3. See example below.

https://alt-web.com/GALLERY/Masonry-Gallery.php

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

quote

 

1. The portrait / standing images are too big on the page. They don't fit in one window like the squared ones are. I don't like it that you've got to scroll to see an image. It needs to be visible at one page without scrolling (does that make sense?) 

 

Well you have a problem there because the images you are refering to are tall and will only fit into the browsers window depth IF the user has their browser window set beyond the depth of the images themselves, otherwise the user WILL need to scroll vertically to see some of the image.

 

You can attempt to negate the problem by setting the width of ALL the images to a smaller width, this obviously means the depth of the images will be smaller and so have more chance of fitting into the browser window depth without having to scroll.

 

You can do this by changing the number of columns the carousel width takes up (see the line of code below, in red. You can experiment with the number of columns occupied by the carousel on different devices)

 

<div class="row mt-5">
<div class="col-9 col-sm-7 col-md-4 mx-auto">

 

 

quote

 

2. Can I enlarge the invisible boxes of the 'previous' and 'next' button till they are both covering half of the page? So when you click on the right side, you go next, and when you click on the left side, you go back.

Is that possible? And if so, how?

 

I would highly recommend you re-instate the carousel arrow icons as per Bens code NOT your code.  Your attempt to position the 'previous/next' text to be clear of the images has resulted in the text not being centered vertcially.

 

To position the arrows outside of the images you need to overide the default classes. Include the below css in your custom css styles. This MUST come AFTER the link to the Bootstrap default css file

 

.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
}
.carousel-control-next {
right: -75px;
}
.carousel-control-prev {
left: -75px;
}

 

 

Using the arrows rather than the text will give you more space on smartphones for the image, also arrow icons will provide clear guidance to the user that they can go backwards and forwards instead of assuming they will click about all over the place to find out how to move through the carousel, which is highly annoying.

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

Hi,


Thanks for your feedback! The first thing with the rows and columns is all clear. I will resize the images with the same height as well so it doesn't go up and down continuously. 
I want to change the arrow part now, but I don't get it back the way Ben sent it to me. Plus, where do I need to paste that code of yours with -75 etc.? 

I'm ok with arrows, as long as they are very small; like the font size at the top. Can you send me the code from what to place after the carousel with images so I don't remove things that shouldn't be removed? That would be a great help.


Thanks again!
Y


Thanks for your advice!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

quote

I'm ok with arrows, as long as they are very small; like the font size at the top. Can you send me the code from what to place after the carousel with images so I don't remove things that shouldn't be removed? That would be a great help.

================

Revert to the original code that Ben posted on June 6th.

 

Size matters greatly.  Small targets are an accessibility problem for people on touch screen devices. An adult human finger tip radius is approx 45px.  The default Cycle2 arrows are an appropriate size for average users on various devices.  Changing size could adversely effect usability.  So my advice is  leave the size alone. 

 

Good luck with your project! 🙂

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

That's good to keep in mind! All these different devices does not make it easier ;). Thank you. 

Y

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

I agree, you should revert to the code posted by Ben then IF you did want the arrows outside of the images  insert the below css code in your page directly before the closing </head> tag:

 

<style>

.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
}
.carousel-control-next {
right: -75px;
}
.carousel-control-prev {
left: -75px;
}

</style>

 

 

You can still experiment with the size of the images for mobile devices:

 

<div class="row mt-5">
<div class="col-9 col-sm-7 col-md-4 mx-auto">

 

The above sets a column width of 9 on smartphone, 7 on tablet and 4 on desktop.

 

The size of the arrows can be changed but since Bootstrap 5 uses svg you would have to change the viewBox parameters in the svg code to something like 0 0 25 25.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

LATEST

Thank you. I will dig into it. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines