slide show

ladytf · May 11, 2016

i do what you say and now online apears the pictures to choose, only when i choose one de slideshow starts work

dsonesuk · May 11, 2016

Sorry! I don't understand?

1) do large single image show or 3 large images?

2) do all three smaller images appear

3) when selecting smaller image does larger image appear

4) do you expect larger images to slide to next automatically? Because its not setup to do this.

ladytf · May 13, 2016

when i oppen da page only apears the 3 small imagens, only when i click in one of this the large image appear, and do what i configure to do - change pictures in 2 seg

u can see in this website http://www.bussoloceano.pt/teste/

Edited May 13, 2016 by ladytf

dsonesuk · May 13, 2016

To apply javascript to the html elements, the html elements MUST be rendered and exist FIRST, with the try it example, it has the javascript placed below the targeted html elements, so running from top to bottom the html elements are rendered then javascript code runs.

The way you have set it up, it reads running from top javascript code externally via a link, the function runs to execute code but because the html has not be rendered yet! it cannot target and apply the slideshow function so it fails to execute and no large images are shown. The html is then fully rendered, so when you click the smaller images because every required is fully rendered the JavaScript can now execute the slideshow functions and from that point it runs as it should.

To fix, you need to place showDivs(slideIndex); below the slideshow html OR place in the external JavaScript file as

window.onload=function() { showDivs(slideIndex); }

ladytf · May 16, 2016

i have a external javascript file, i already put what u say but nothing changes.

what i'm doing wrong?

var slideIndex = 1;
showDivs(slideIndex);

window.onload=function() {
  showDivs(slideIndex);
} 

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
	var i;
	var x = document.getElementsByClassName("mySlides");
	var dots = document.getElementsByClassName("demo");
	if (n > x.length) {slideIndex = 1}
	if (n < 1) {slideIndex = x.length} ;
	for (i = 0; i < x.length; i++) {
	 x[i].style.display = "none";
	}
	slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}    
    x[slideIndex-1].style.display = "block";  
    setTimeout(showDivs, 2000); // Change image every 2 seconds
	for (i = 0; i < dots.length; i++) {
	 dots[i].className = dots[i].className.replace(" w3-border-red", "");
	}
	x[slideIndex-1].style.display = "block";  
	dots[slideIndex-1].className += " w3-border-red";
	}

dsonesuk · May 16, 2016

remove or comment out showDivs(slideIndex);

var slideIndex = 1;
///showDivs(slideIndex);

ladytf · May 16, 2016

thank now works

but the onclick doesn't work anymore...

i have the slide write like this:

<div style="max-width:500px">
			<img class="mySlides" src="images/assets/bussoloceano (5).jpg" style="width:100%">
			<img class="mySlides" src="images/assets/bussoloceano (6).jpg" style="width:100%">
			<img class="mySlides" src="images/assets/bussoloceano (7).jpg" style="width:100%">
            
					<img src="images/assets/bussoloceano (5).jpg" style="width:30%" onclick="currentDiv(1)">
					<img src="images/assets/bussoloceano (6).jpg" style="width:30%" onclick="currentDiv(2)">
					<img src="images/assets/bussoloceano (7).jpg" style="width:30%" onclick="currentDiv(3)">
		</div>

dsonesuk · May 16, 2016

Like I said, you have to different versions of slideshow referencing the same elements with different variables, and these are conflicting trying to apply there version of slideshow.

ladytf · May 16, 2016

ahh ok, in that don't understand that........

once again, thank u

is possible lhe little imgens stays on right and left the big one instaed the bottom?

------------------------------------------------------------------------------------------------------------------------------------

another question, isn't possible put a slideslow inside a table?? i'm trying but the images doesn't apear....

Edited May 16, 2016 by ladytf

dsonesuk · May 16, 2016

Never put anything in a table, except tabular data, its not a element to use for today's required responsive mobile device layouts.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <link href="http://www.bussoloceano.pt/teste/css/blackwhite.css" media="screen" type="text/css" rel="stylesheet">
        <script type="text/javascript">
            var slideIndex = 1;
            var t;
            var dots;
            var maxheight = 0;
            var timedelay = 2000;
            window.onload = function() {
                var x = document.getElementsByClassName("mySlides");
                var parent_elem = document.getElementById('myslideFrame')

                var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
                for (i = 0; i < x.length; i++) {
                    // x[i].style.width = "100%";

                    if (x[i].height > maxheight)
                    {

                        maxheight = x[i].height;

                    }

                }

                document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";

                showDivs(slideIndex);
                carousel();
            };

            function plusDivs(n) {
                showDivs(slideIndex += n);

            }

            function currentDiv(n) {
                showDivs(slideIndex = n);
            }

            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                dots = document.getElementsByClassName("demo");
                if (n > x.length) {
                    slideIndex = 1;
                }
                if (n < 1) {
                    slideIndex = x.length;
                }
                ;

                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" w3-border-red", "");
                }
                x[slideIndex - 1].style.display = "inline-block";
                dots[slideIndex - 1].className += " w3-border-red";
            }



            function carousel() {
                var i;

                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                    dots[i].className = dots[i].className.replace(" w3-border-red", "");
                }
                slideIndex++;
                if (slideIndex > x.length) {
                    slideIndex = 1
                }
                x[slideIndex - 1].style.display = "inline-block";
                dots[slideIndex - 1].className += " w3-border-red";
                t = setTimeout(carousel, timedelay);
            }

            function pauseCarousel() {

                clearTimeout(t)
            }

            function startCarousel() {

                t = setTimeout(carousel, timedelay);
            }

        </script>
        <style type="text/css">
            .mySlides {width: 100%;display: none; vertical-align: middle;} /**/

            #myslideFrame{text-align: center; font-size:0;min-height:100%; font-size:0; text-align: center; background-color: #fff;}
            #myslideFrame:before, .flexbox > div:before {content: ""; height: 100%; vertical-align: middle; width: 0; background: red; display: inline-block;}

            .flexbox {
                display: flex;
                flex-wrap: wrap;
                margin: 2% 0 !important;/**/
            }
            .flexbox > div{
                flex: 1 0 100%;
                vertical-align: middle;
                font-size:0;
                margin: 10px 0 !important;
            }

            .flexbox > div img {vertical-align: middle;}
        </style>
    </head>
    <body>
        <div class="w3-content" style="max-width:500px; margin: 0 auto; ">
            <div id="myslideFrame"  class="w3-threequarter">
                <img class="mySlides" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (5).jpg" >
                <img class="mySlides" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (6).jpg" >
                <img class="mySlides" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (7).jpg" >
            </div>
            <div class="w3-row-padding w3-section flexbox w3-quarter">
                <div class="w3-section w3-row-padding w3-rest">
                    <img class="demo w3-border w3-hover-shadow" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (5).jpg" style="width:100%" onclick="currentDiv(1)" onmouseover="pauseCarousel();" onmouseout="startCarousel()">
                </div>
                <div class="w3-section w3-row-padding w3-rest">
                    <img class="demo w3-border w3-hover-shadow" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (6).jpg" style="width:100%" onclick="currentDiv(2)" onmouseover="pauseCarousel();" onmouseout="startCarousel()">
                </div>
                <div class="w3-section w3-row-padding w3-rest">
                    <img class="demo w3-border w3-hover-shadow" src="http://www.bussoloceano.pt/teste/images/assets/bussoloceano (7).jpg" style="width:100%" onclick="currentDiv(3)" onmouseover="pauseCarousel();" onmouseout="startCarousel()">
                </div>
            </div>
        </div>

    </body>
</html>

Edited May 17, 2016 by dsonesuk

dsonesuk · May 17, 2016

Updated

ladytf · May 17, 2016

ok, in that case i will change how i have my page.

this code u give is to put the little imgens on right and left the big one instaed the bottom??

i'm making more than one slideshow, this with the little and big images is one, and the question i do for the one in table is another one.

slide show

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in