I've never written codes but I'm building my own photography page. It's a simple idea; just an onclick slideshow. I could accomplish that by creating a div containing the images and using js for the onclick effect. However, I can see all the images loading before the slides hide behind the 1st image and was wondering if there's anyway to hide the div until the content is fully loaded. Also, I'd like to add a fade ou/in effect between each image. Can someone give me a light on it? My code until now is:
<title>Untitled Document</title>
<style type="text/css">
.middle {
text-align: center;
}
</style>
</head>
<body class="middle">
<p><img src="header.jpg" width="131" height="21" alt="guilimora" /></p>
<p> </p>
<p><span style="text-align: center"></span></p>
<div id="imgs">
<div align="center">
<img src="../PHOTOGRAPHS/01-yankees bitch.jpg" alt="img1" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/02-where the sun shines best.JPG" alt="img2" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/03-keep on rolling.jpg" alt="img3" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/04-534 am.JPG" alt="img4" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/05-penguin smokes.jpg" alt="img5" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/06-quaint.jpg" alt="img6" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/07-downtown mary.JPG" alt="img7" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/08-untitled.jpeg" alt="img8" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/09-14190012.jpg" alt="img9" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/10-30470064.JPG" alt="img10" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/11-30460001.JPG" alt="img11" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/12-no trees.JPG" alt="imh12" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/13-little you or smaller I.jpg" alt="img13" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/14 - salvation.jpeg" alt="img14" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/15-afterlight-343.jpeg" alt="img15" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/16 afterlight-233 2.jpg" alt="img16" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/17 80760026.JPG" alt="img17" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/18 49750012.jpg" alt="img18" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/19 nope.JPG" alt="img19" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/20 30470138.JPG" alt="img20" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/21 93470016.JPG" alt="img21" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/22 babe the beer.jpg" alt="img22" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/23 08450037.jpg" alt="img23" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/24 ny.jpg" alt="img24" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/25 - bruised benja.jpg" alt="img25" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/26 - madam m.jpg" alt="img26" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/27 51770018.JPG" alt="img27" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/28 23700024.jpg" alt="img28" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/29 49630021 trat.jpg" alt="img29" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/30 afterlight-324.jpeg" alt="img30" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/31 IMG_1078 trat.jpg" alt="img31" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/32 05810018 copy.jpg" alt="img32" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/33 - wanna go wanna go wanna go.jpg" alt="img33" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/34 46080021.jpg" alt="img34" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/35 Image-1-1.jpg" alt="img35" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/36 Image-1-11 copy.jpg" alt="img36" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/37 30460024.JPG" alt="img37" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/38 smoking on my way to.jpg" alt="img38" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/39 where does she go.jpg" alt="img39" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/40 IMG_1264.jpg" alt="img40" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/41 44170017.JPG" alt="img41" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/42 49750004.jpg" alt="img42" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/43 30470029 trat.jpg" alt="img43" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/44 afterlight-266.jpeg" alt="img44" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/45 91930027.JPG" alt="img45" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/46 91930008 copy.jpg" alt="img46" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/47 49750028.jpg" alt="img47" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/48 93470001.jpg" alt="img48" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/49 afterlight-32.jpg" alt="img49" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/50 03140034.JPG" alt="img50" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/51 04500006.jpg" alt="img51" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/52 30470008.jpg" alt="img52" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/53 Image-1.jpg" alt="img53" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/54 handsome julio.jpg" alt="img54" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/55 30470046.JPG" alt="img55" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/56 80760027 copy.jpg" alt="img56" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/57 30470019 5.jpg" alt="img57" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/58 0283035.jpg" alt="img58" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/59 30470080.JPG" alt="img59" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/60 IMG_3936.jpg" alt="img60" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/61 sf.jpg" alt="img61" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/62 01360034.jpg" alt="img62" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/63 afterlight-332.jpeg" alt="img63" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/64 afterlight-264.jpeg" alt="img64" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/65 afterlight-237.jpeg" alt="img65" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/66 30470106 copy.jpg" alt="img66" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/67 unti.JPG" alt="img67" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/68 04470013.jpg" alt="img68" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/69 80770023.JPG" alt="img69" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/70 afterlight-347.jpeg" alt="img70" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/71 ntitled.jpg" alt="img71" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/72 DSC03987 2.jpg" alt="img72" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/73 80760030 copy.jpg" alt="img73" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/74 afterlight-244.jpg" alt="img74" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/75 i67487664.jpg" alt="img75" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/76 DSC02973.JPG" alt="img76" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/77 80760029 copy.jpg" alt="img77" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/78 IMG_1347 2.jpg" alt="img78" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/79 IMG_1068.JPG" alt="img79" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/80 IMG_2219.JPG" alt="img80" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/81 30460025.JPG" alt="img81" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/82 03170008.jpg" alt="img82" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/83 CIMG0062 trat.jpg" alt="img83" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/84 IMG_1058 3.jpg" alt="img84" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/85 afterlight-338.jpeg" alt="img85" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/86 49750024.jpg" alt="img86" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/87 untitled.jpg" alt="img87" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/88 IMG_1775 trat.jpg" alt="img88" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/89 30460023.JPG" alt="img89" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/90 IMG_1271 trat 1.jpg" alt="img90" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/91 afterlight-306 2.jpeg" alt="img91" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/92 DSC04375.jpg" alt="img92" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/93 death and all the rest.jpg" alt="img93" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/94 afterlight-284.jpeg" alt="img94" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/95 DSC03209.jpg" alt="img95" height="500" width="auto"/>
<img src="../PHOTOGRAPHS/96 74860030 trat.jpg" alt="img96" width="auto" height="500" class="imgs"/>
</div>
<script type="text/javascript">
var port_imgs, i;
window.onload = function () {
//get all the images in "#imgs"
port_imgs = document.getElementById("imgs").getElementsByTagName("img");
//loop through, hiding them all
for (i = 0; i < port_imgs.length; i++) {
port_imgs[i].style.display = "none";
//wire up the click event and do the magic
port_imgs[i].onclick = (function (k) {
var r = function () {
this.style.display = "none";
if (k >= port_imgs.length) { k = 0 }
port_imgs[k].style.display = "block";
};
return r;
})(i+1);
}
//un-hide (display) the first image so we're all set to go
port_imgs[0].style.display = "block";
}
</script>
</body>
</html>
This version is based on the plugin bxSlider. It's a bit buggy but it's very versatile and been around for a while. From experience, I advise against using the minimized version (jquery.bxslider.min.js). Instead use the developer's version (jquery.bxslider.js). The solution consists of 2 files:
The original stylesheet jquery.bxslider.css has relative URLs referencing some background images that aren't needed, as well as some borders, and box-shadowing that don't coincide with the "minimalist theme". bxmod.css reflects those changes.
See comments for additional details on finer grain control like speed and custom styles.
/* This is bxmod.css,
** copy and paste into a separate file
** and place it in the same directory
** where bx.html is located.
*/
@charset "utf-8";
/** bxMod -=- Modified bxSlider Style
* bxSlider v4.2.5
* Copyright 2013-2015 Steven Wanderski
* Written while drinking Belgian ales and listening to jazz
* Licensed under MIT (http://opensource.org/licenses/MIT)
*/
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
.bxSlider {
margin: 0;
padding: 0;
}
ul.bxSlider {
list-style: none;
}
.bx-viewport {
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
/* -moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc; */
/* border: 5px solid #fff; */
/* background: #fff; */
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
/* background: url('images/bx_loader.gif') center center no-repeat #ffffff; */
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {
font-size: 0;
line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
/* background: url('images/controls.png') no-repeat 0 -32px; */
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
background-position: 0 0;
}
.bx-wrapper .bx-next {
right: 10px;
/* background: url('images/controls.png') no-repeat -43px -32px; */
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
/* background: url('images/controls.png') -86px -11px no-repeat; */
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
/* background: url('images/controls.png') -86px -44px no-repeat; */
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BxSlider -=- Minimal | bx.html</title>
<link rel="stylesheet" href="bxmod.css">
<style>
/* Styles Optional */
/* Eliminates the blue select background */
::-moz-selection {
background: none;
}
::selection {
background: none;
}
/* Resets */
html {
box-sizing: border-box;
font: small-caps 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 solid transparent;
text-decoration: none;
list-style: none;
}
/* Demo styles */
body {
background: #000;
color: #FFF;
margin-left: 1em;
}
a:visited {
color: grey;
}
</style>
</head>
<body>
<header>
<!-- Header Optional -->
<h1>BxSlider -=- Minimal</h1>
</header>
<ul class="bxSlider">
<li>
<img src="https://placehold.it/500x281/000/fff.png&text=500x281" />
</li>
<li>
<img src="https://placehold.it/500x375/0ff/111.png&text=500x375" />
</li>
<li>
<img src="https://placehold.it/500x500/fc0/00e.png&text=500x500" />
</li>
<li>
<img src="https://placehold.it/500x625/0f0/f00.png&text=500x625" />
</li>
<li>
<img src="https://placehold.it/500x719/fff/000.png&text=500x719" />
</li>
<li>
<img src="https://www.libsdl.org/projects/SDL_image/docs/demos/lena.jpg" />
</li>
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/0/04/TCF_centre.jpg" />
</li>
<li>
<img src="https://wanderingvegans.files.wordpress.com/2009/08/himejijo1.jpg" />
</li>
</ul>
<footer>
<!-- Footer Optional -->
<p>This demo is an answer to a <a href='http://stackoverflow.com/questions/32534871/hiding-div-until-fully-loaded-and-adding-fade-effect-on-js-onclick-slider/32536751#32536751'>question posted on Stackoverflow</a>
</p>
<p>bxSlider is responsive, so it usually isn't neccessary to set the dimensions on images.</p>
</footer>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
var bx = $('.bxSlider').bxSlider({
mode: 'fade',
speed: 500, // Inc/Dec speed of fade
pager: false,
controls: false,
adaptiveHeight: true, // If animated height changes not desired set to false
adaptiveHeightSpeed: 500 //Inc/Dec speed if above option is true
});
$('.bx-wrapper').on('click', function(event) {
event.preventDefault();
bx.goToNextSlide();
});
});
</script>
</body>
</html>The gallery wasn't centered so I centered it for you, if it doesn't go well with your plans, you can just delete or comment out that potion in your <style> block. Notice at the very end of the </script> block you'll see:
window.onload = init(1000, 1000);
You can adjust the delay (1st number) and fadeIn (2nd number) times, they are in milliseconds so right now it's set to delay for 1 second and fadeIn will take 1 second to complete.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<style type="text/css">
/* Centering the gallery - Optional */
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#ext {
display: table;
overflow: hidden;
margin: 0px auto;
height: 100%;
}
#imgs {
display: table-cell;
vertical-align: middle;
}
.middle {
text-align: center;
}
#set img {
display: none;
}
</style>
</head>
<body class="middle">
<p>
<img src="https://placehold.it/500x50/000/fff.png&text=HEADER" alt="guilimora" />
</p>
<p> </p>
<p><span style="text-align: center"></span>
</p>
<main id="ext">
<section id="imgs">
<div id="set">
<img id="i1" src="https://placehold.it/500x281/000/fff.png&text=FIRST" />
<img id="i2" src="https://placehold.it/500x281/048/Fee.png&text=SECOND" />
<img id="i3" src="https://placehold.it/500x281/fa8/375.png&text=THIRD" />
<img id="i4" src="https://placehold.it/500x281/9a7/a10.png&text=FOURTH" />
<img id="i5" src="https://placehold.it/500x281/fd3/b0d.png&text=FIFTH" />
<img id="i6" src="https://placehold.it/500x281/fff/000.png&text=LAST" />
</div>
</section>
</main>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var spd = 1000;
$(document).ready(function() {
var init = $('#set img:first-child'),
set = $('#set img');
init.one('load', function() {
$(this).fadeIn(spd);
});
set.click(function(spd) {
var imgs = set.size();
var fwd = $(this).next();
fwd = fwd.index() == -1 ? init : fwd;
$(this).fadeOut(spd - 250);
setTimeout(fwd.fadeIn(spd), 250);
});
});
</script>
</body>