Styles apply just to first two slides - javascript

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>

It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.

You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio

I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

Related

My embedded YouTube videos stopped working

I'm developing a website and the home page has a few embedded youtube videos. The videos worked great until recently, but now it seems they no longer work! It fetches the video from YouTube, but I'm not able to play any of them.
I compared the code to an earlier version and the code is still the same. I've been searching and scratching my head on this for hours trying to figure out why it won't work anymore. Here's a JSFiddle with the code I'm using.
https://jsfiddle.net/ftmLsaym/
Any ideas what I need to do to fix this?
HTML
<div class="splashdiv">
<iframe id="teaser" src="https://www.youtube.com/embed/PNT39y4N4H4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div style="width: 100%">
<button style="width:50%;float:left" onclick="previousVideo()">Previous</button>
<button style="width:50%;float:right" onclick="nextVideo()">Next</button></div>
CSS
.splashdiv {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
z-index:-1;
}
.splashdiv iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;
}
JS
var frame = document.getElementById('teaser');
var pos = 0;
var src = [
"https://www.youtube.com/embed/PNT39y4N4H4?rel=0",
"https://www.youtube.com/embed/M--kEKu8-IE?rel=0",
"https://www.youtube.com/embed/3wgd8fHidzg?rel=0",
"https://www.youtube.com/embed/2yf4bUW9mlE?rel=0",
"https://www.youtube.com/embed/CueAcWRsaY8?rel=0",
"https://www.youtube.com/embed/ulsa6Aog7Yw?rel=0",
"https://www.youtube.com/embed/7qTp3lk7gt4?rel=0"
]
function nextVideo() {
if (pos < 6) {
pos += 1;
showVideo();
}
}
function previousVideo() {
if (pos > 0) {
pos -= 1;
showVideo();
}
}
function showVideo() {
frame.src = src[pos];
}
function barnaby() {
pos = 1;
frame.src = src[pos]+"&autoplay=1";
}
The z-index is too low, you need to increase it, it's behind another div a solution is shown here although you don't need to use 200, just an example : ) https://jsfiddle.net/ftmLsaym/5/
Just delete this line:
z-index:-1
z-index:-1 sets the whole .splashdiv div (including the iframe) to be behind the body layer. So the YouTube iframe cannot capture your mouse click.
Move the iframe out of the splashdiv - that should let the video run.
replace your .splashdiv css code with this
.splashdiv {
position: relative;
width: 100%;
height: 0;
padding-bottom: 51%;
z-index:2;
}

Changing the mask height depending on a responsive image

Having a problem in trying to copy the height of a responsive image to my mask on first load and on every time the window is resized. I've tried a few js scripts, but still I cant make it happen.
It is really a responsive image slider with a div(mask) exactly over it whatever the viewport screen size is.
this is my jQuery script:
function maskInit(){
var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
$("#mask").height() = offsetDots;
}
$(document).ready(function() {
maskInit();
});
$(window).resize(function(){
maskInit();
});
and my CSS:
#slide{
height: 10vw; /* to simulate a responsive image */
width: 100%;
margin: 0;
padding: 0;
background: red;
z-index: 0;
}
#mask{
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
background: gray;
opacity: 0.8;
}
I've setup a jsFiddle here to simulate my problem
There is something wrong with your script.
You are NOT setting the mask height with this:
$("#mask").height() = offsetDots;
Check jQuery .height()
Instead use it this way:
$("#mask").height(offsetDots);
or you can set via css:
$("#mask").css({"height":offsetDots});
Here's your updated jsFIDDLE demo
.height() is a function so you can not do $("#mask").height() = offsetDots; use $("#mask").height(offsetDots); or by .css({"height":offsetDots}) to set height.

How to animate through stacked images Javascript

I have a series of images that are "stacked" inside of div. I want to transition (crossfade) between these images (not using jQuery), with CSS transitions. What I do not know how to do is endlessly transition between the images. The images are added dynamically through a JSON feed, and they will continue to be added so the number of images in the divs is not set.
I was thinking an approach using the z-index to bring images on top of each other (and then animate the opacity and other properties) but if I want to animate through 4 photos, I am not sure how to keep track of z-index and the opacity settings, to know which is showing. Here is what I came up with so far, but I would be interested in how people cycle through a potentially unknown number of images and keep track of what is "shown". Basically, I have a simple CSS Transition set on the images right now and am animating by adding and removing classes and I want to be able to create a cycle that goes through the images, changing the z-index and some property, and then later send it to the back of the group.
HTML
//Example div (on my page there are many of these)
<div class="imageHolder">
<div class="imageContent">
<img class="homeImages" src="media/test.png">
<img class="homeImages" src="media/test1.png">
<img class="homeImages" src="media/test2.png">
</div>
</div>
CSS
div.imageHolder {
float: left;
position: relative;
width: 32.9%;
padding-bottom: 18.6%;
margin-right: .1em;
}
div.imageContent {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1
}
div img.newImage {
z-index: 2;
opacity: 0;
}
div img.live {
z-index: 3;
opacity: 1;
transition: opacity 1s ease-in;
}
Javascript
function select() {
var x = Math.floor(Math.random() * divs.length);
if(divs[x].children.length > 1) {
var live = document.querySelector('div img.live');
var old = document.querySelector('div img.newImage');
live.className = 'newImage';
old.className += ' live';
}
}
You need js, at least to keep track of which is the current image and add a class that triggers the css transition.
If I understand correctly, you've almost got it. Try this
function select() {
var x = Math.floor(Math.random() * divs.length),
current = document.querySelector('.imageContent img.live'),
newOne = document.querySelectorAll('.imageContent img')[x];
current.className = ''; // clear the .live class
newOne.className = 'live';
// this triggers the css transition
setTimeout(select, 1000); // after the css transition ends, do this again
}
And change the css to
div img {
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* moved .newImage styles here as a default */
z-index: 2;
opacity: 0;
}

Change image on scroll

On my website is a fixed image. This image should be "animated", meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation.
I'm not that accustomed to using JS, thus I don't really know where to start.
The only thing I have is the CSS:
#animation {
background-repeat: no-repeat;
position : fixed;
width: 980px;
margin: 0 auto;
}
Ok, I've created example for fixed number of images that will be used in "movie/animation". In this case, the number is 5. Script will get image of site's height and whole animation (5 frames) will have lenght of site's lenght. I've preloaded and hide images that will be used in animation just to make sure that animation will work smooth.
HTML
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
<!-- Next image is used for first frame, before scroll -->
<img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" />
<div id="bottommark"></div>
CSS
.hidden {
position: absolute;
top: -9999999px;
}
#bottommark {
position: absolute;
bottom: 0;
}
#animation {
background-repeat: no-repeat;
position : fixed;
top: 0;
width: 980px;
margin: 0 auto;
}
body, html {
height: 1000px; /* just for DEMO */
margin: 0;
}
jQuery
$(document).ready(function(){
var offset2 = $(document).height();
var lineHF = offset2 - $("#bottommark").position().top;
$(window).scroll(function(){
var offset1 = $(document).height();
var offset = $(window).scrollTop();
var lineH = offset1 - $("#bottommark").position().top - offset;
var lineHpart = lineHF/5; //just in case animation have 5 frames/images
//below is code in case that animation have 5 frames.
//If number of frames is different, edit code (add/remove if loops)
$("span").html(lineH);
if (lineH > lineHpart*4) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg");
}
if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg");
}
if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg");
}
if (lineH < lineHpart*2 && lineH > lineHpart*1) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg");
}
if (lineH < lineHpart) {
$("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg");
}
});
});
DEMO

Zoom on a picture on resizing

I'm developing a website where I have to display a picture (not a problem).
But, I have to display it as this link: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
So, On resizing, I have to zoom on the picture to never scale it.
Does some on know how to do it?
Here is what I have:
html:
<div id="container_images">
<ul>
<li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
</ul>
</div>
CSS:
#container_images{
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#container_images li{
display: block;
list-style: none;
z-index: -30;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:1;
}
#container_images li img{
width: 100%;
height: 100%;
display: block;
}
If I understood correctly you don't need the browser's inbuilt zooming (ctrl+), you just want to make the picture fill in the whole window of the browser when the window is resized.
You will need 2 things for that.
First, you need some javascript to execute on window resize event, then you will need some simple maths to calculate the center of the picture taking into account the new window size and set left/top margin of the picture to new values.
You can easily do that with jQuery:
$(window).resize(function() {
var h = $(window).height();
var w = $(window).width();
var pic = $('#container_images img');
var pic_width = pic.width(), pic_height = pic.height();
$(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});
One thing to remember is that if your picture's width/height is already changed from its original size, you will get that new size from width() and height() functions.
So you either should make sure the original is not touched, or use one of the solution out there for grabbing the original picture size (e.g. How do I get actual image width and height using jQuery?).
Also the above snippet is to just get you started, you should grab the picture and its parameters in some init function and only recalculate/modify css on resize event.

Categories