How to do this image is loading? - javascript

I was just going through this beautiful website. Can anybody tell me how that designer has shown "The magic is loading" thing :
http://danielhellier.com/showcase/danielhellier/
The image just disappears as soon as the site is loaded complelely.

He is using javascript.
Look at the file http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js
in the first line he fades out the loading div once the site has loaded:
$(window).load(function () {
$('#loading').fadeOut('slow');
});
The loading div:
<div id="loading">
<div align="center">
<p>The magic is loading</p>
<img src="img/loader.gif" alt="Loader" />
</div>
</div>
The CSS for the loading div:
#loading {
background: none repeat scroll 0 0 #1E1E1E;
color: #FFFFFF;
cursor: wait;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 100;
}
Notice how the z-index is high to put it on top of everything and the height and width are 100% to make it take up the entire window with its opaque background.
Also he put that <div> before the rest of the HTML. So it will be loaded first and the JavaScript to remove it is triggered by the load event on the window which will not be triggered until everything has loaded.
A very nice effect.

Related

HTML div formatting: three images that dynamically match viewport size (image slider)

I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click

Working with interactive-background.js

I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})

Only load lightbox image on click - Reduce page loading time

I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.
With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.
The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.
A link to the page:
http://agentboris.com/press/index-2.php#_
Here is the HTML for the image that includes the lightbox effect and lazy-loading:
Click to View
<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">← BACK <br/></p>
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>
And the CSS:
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display:none;
/** Position and style */
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 10000px;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
/*max-width: 90%;*/
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
position: fixed;
top: 0;
left: 0;
/** Unhide lightbox **/
display: block;
}
Simply use lazySizes. Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src):
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">
lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).
Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img?
Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.
Also, since you've named all of your images (big) with the suffix of -thumb, you don't really need to make an API call.
HTML
<div class="presscoll">
<a href="#boris-2014-awards" class="show-lightbox">
<img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
</a>
..... more thumbnails
</div>
Only have (1) of these.
<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
<br /><p class="parastyle" style="letter-spacing: 0.05em;">← BACK <br/></p>
<img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
</a>
$('.presscoll').on('click' 'a.show-lightbox', function(e) {
// get src and remove "-thumb"
var src = $(this).find('img').attr('src');
src = src.replace('-thumb', '');
// change image attr
$('#show-lightbox').find('img').attr('src', src);
// may need to call lightbox initialize again here
});
Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.
This isn't tested btw, but the idea will work.

jQuery jScrollPane only works with text

I am trying to use jScrollPane to scroll through my gallery that is inside of an iframe. I am using the jQuery code for iframe scrolling from the official example.
Using this code doesn't work for my images (it just hides the original browser scrollbars, doesn't throw any errors and refuses to scroll), but it works perfectly if I replace my images with multiple paragraphs so they overflow (just like in the example).
EDIT: I forgot to mention that images scroll perfectly using the default browser scrollbar.
EDIT #2: Made a JSFiddle.
Here's how my gallery is structured:
...
</head>
<body>
<div id="content"> // Used the same way as in the example, works with text
<div class="gallery">
<div class='picture'>
<img class='pin' src='something'/>
<div class='wrapper'>
<img class='thumbnail' src='something'/>
<img class='border' src='something' />
</div>
</div>
<div class='picture'>
...
</div>
</div>
</div>
...
And here's the CSS for gallery and pictures:
.gallery {
position: relative;
width: 98%;
}
.picture {
float: left;
position: relative;
display: list-item;
list-style-type: none;
width: 11%;
}
.picture .pin {
position: absolute;
left: 48%;
width: 13%;
}
.picture .thumbnail {
position: absolute;
width: 89%;
margin-top: 19%;
}
.picture .border {
position: absolute;
width: 100%;
}
I ignored margins and some other irrelevant stuff, but you get the idea.
The jQuery code is exactly the same as presented in the example.
I think the problem is that images are loaded after scrollbar is initialized, and scrollbar does not detect container size changes by default. If you read documentation carefully, you can see next:
Demo showing how autoReinitialise can also be used so that content
with images in it displays correctly in jScrollPane
So, try autoReinitialise option. If it won't help - update your question with example of your iframe on jsFiddle.net
Solved it!
Apparently, the script didn't like the absolute position of my .picture .pin. Changing it to relative and restyling a bit solved my issue.
Updated JSFiddle

Have column extend to bottom of browser with an empty header

<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.

Categories