Before and After Slider with Multiple Images - javascript

I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.

You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV

Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;

Related

JS calculate current center of screen

I searched a lot but couldn't find the answer I want. I have a JS script which shows an image when a fixed element is hovered. However I would like to always have the image at the center of the screen, not matter where the user scrolls. How can I reach that?
My JS function:
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change img to span using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
JSFiddle: https://jsfiddle.net/rbmd6a39/
I can get offset from the top of page using
window.pageYOffset;
But I don't know where to put that value to have it in the center.
You could give that image styles that would make it fixed in the center of your screen. No need for JS there.
Now also works on very large images with max-width, max-height and object-fit: contain!
.always-centered {
display: block;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
z-index: 99;
}
You don't actually need to use JavaScript for centering it. You could use position: fixed and center using left: 50%; transform: translateX(-50%);in CSS, which would be less demanding of the client computer.
Using JS, though, it'd be pretty much the same thing: the image would need to be fixedly positioned and you'd define left as half of the viewport minus half of your image width.
I suggest using CSS and classes if possible, since this is less convoluted and all calculations will be dealt be the browser itself.

change background images using mouse wheel plugin

I am trying to change the background image of a page when a uses mouse wheel scroll/scrolldown. Something like this page here.
I have three different background images that I wish to change (i.e. increment when the user scrolls down/decrement when the user scrolls up).
See jsfiddle here (which isn't really working as hoped).
Please also see code below.
I hope it is clear what I am trying to achieve. If not please let me know and I can provide further information.
CSS
.bgImage {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
z-index: 1;
}
body, html, #scene, .bgImage {
height: 100%;
}
.home{
background: url("http://cdn3-www.wrestlezone.com/assets/uploads/gallery/ric-flair/gettyimages-93353438.jpg") center center no-repeat;
background-size: cover;
}
.brett {
background: url("http://2.bp.blogspot.com/-69o3lsK5MrQ/ThhlOTxGQlI/AAAAAAAAEfY/e0AJF-6sKBw/s1600/bret_hart_-_bret_hart_74.jpg") center center no-repeat;
background-size: cover;
}
.hulk{
background: url("https://tse3.mm.bing.net/th?id=OIP.M44755b5d2bade01af176621c77ebe279o2&pid=15.1&P=0&w=300&h=300") center center no-repeat;
background-size: cover;
}
HTML
<div class="bgImage"></div>
JS
var pages = ['home','brett','hulk'];
var page = 0;
$(document).ready(function(){
$('.bgImage').on('mousewheel', function (e) {
if (e.deltaY>0) {
page += 1;
if(page >= pages.length){
return;
}else{
jQuery('.bgImage').addClass(pages[page]);
}
} else {
page -= 1;
jQuery('.bgImage').removeClass(pages[page]);
}
e.preventDefault();
});
});
Right off the bat I can tell you that you'll probably need a more robust scrolling framework in order to emulate the site you linked. Try checking out scrollmagic.io for ideas on how to execute this. One way to look at it is you are essentially capturing scrolling and applying them to a "timeline" of events, if you will.
To get your example working, check out this fiddle:
https://jsfiddle.net/1nrL5gv1/20/
One important thing I added was the removal of all of the existing classes before you apply a new one. This way, only the most recent image will show up and you won't have to worry about css specificity/order.
function cleanUpBg() {
for(i = 0; i < pages.length; i++) {
bgEl.removeClass(pages[i]);
}
}
I also added a timeout so you can actually trigger one image change at a time. Again, I highly recommend checking out existing scroll libraries, as they will allow you get into a project like this much more quickly.

Javascript If/Else statement checking content:url

I'm having issues with figuring out the correct syntax to have my code check the value of one of my images with the id '#main'. My CSS has the image changing its src based on a media query using the content:url attribute. The reason I'm doing it this way is because I have about 5 different background images that trigger at different widths to provide a frame for my content and I need to be able to adjust the height of my ".text" div based on what image is being used as the frame currently.
I understand how to code all that, all I need is help with how to ask for the value correctly on the first one and I should be able to do the rest from there. Just to clarify once again, the issue is in the if/else statement; the code works without the if/else statement.
Here is what I have:
function updateHeight()
{
if ($("#main").css('content') === 'url("../images/main-bg2-landscape.png")') {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}
Just an example of the CSS in place:
#main {z-index: -1;
position: absolute;}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
#media only screen and (min-width: 1025px) {
#main {content:url(../images/main-bg2-landscape.png);}
.text {position: absolute;
background-color: #FFFFFF;
background-position: top;
left: 11%;
width: 78%;
margin-top: 19%;
opacity: .4;}
}
Thanks
The problem is most likely that the "url()" call in the css will result in the full path to the image in the HTML that is ultimately rendered. It will not be the relative path you place in the .css file
Probably something like /images/main-bg2-landscape.png in this case. If you inspect the image element in chrome or the browser of your choice you'll see the full path that ends up in your HTML.
A better option may be to do the comparison on the name of the file only so that you aren't dependent on the location of the image. Something like:
if ($("#main").css('content').indexOf("main-bg2-landscape.png") !=-1) {
var div = $('.text');
var width = div.width();
div.css('height', width *.57);}
}

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.

How to get this kind of web page effect

The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

Categories