How to set Images in Center while even images? - javascript

I am trying to use a 3d image carousel. But it works fine while there odd images. But when i add an image and then in even images position get change, it's don't come from center, it goes to left position.
Here is jsfiddle link:
https://jsfiddle.net/nriddhi/bp45zkun/
Js code:
jQuerynum = jQuery('.my-image-3d').length;
jQueryeven = jQuerynum / 2;
jQueryodd = (jQuerynum + 1) / 2;
if (jQuerynum % 2 == 0) {
jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').addClass('active');
jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').prev().addClass('prev');
jQuery('.my-image-3d:nth-child(' + jQueryeven + ')').next().addClass('next');
} else {
jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').addClass('active');
jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').prev().addClass('prev');
jQuery('.my-image-3d:nth-child(' + jQueryodd + ')').next().addClass('next');
}
jQuery('.my-image-3d').click(function() {
jQueryslide = jQuery('.active').width();
console.log(jQuery('.active').position().left);
if (jQuery(this).hasClass('next')) {
jQuery('.image-3d-carousel').stop(false, true).animate({left: '-=' + jQueryslide});
} else if (jQuery(this).hasClass('prev')) {
jQuery('.image-3d-carousel').stop(false, true).animate({left: '+=' + jQueryslide});
}
jQuery(this).removeClass('prev next');
jQuery(this).siblings().removeClass('prev active next');
jQuery(this).addClass('active');
jQuery(this).prev().addClass('prev');
jQuery(this).next().addClass('next');
});
// Keyboard nav
jQuery('html body').keydown(function(e) {
if (e.keyCode == 37) { // left
jQuery('.active').prev().trigger('click');
}
else if (e.keyCode == 39) { // right
jQuery('.active').next().trigger('click');
}
});
Is there any solution? thanks...

You have four items last item is not visible. The total length of the items is larger then the document width.
This will solve your problem

issue is not with the display property of the images. Issue is with "display flex" and "justify-content center" of ".image-3d-carousel". If we have odd number of images middle image will be centered as it is default "justify-content center" behavior. Of course if we have even number of images flex container tries to make its content centered, it means that middle images will be away from the center with the same distance.
From my point of view it'll be better to make some kind of frame, which will have width of active image and will be centered permanently. The frame contains carousel, which overflows it but with visible content.
You can see an example here https://jsfiddle.net/14u6Lmn3/
Centered frame container (just for meeting jsfiddle posting requirements):
.image-3d-frame {
margin: 0 auto;
width: 375px;
}
I've just wrapped carousel with container called "frame", removed property "justify-content center" as we center our main image with the frame and given initial offset as we have the second image active. Hope my idea is clear enough.

Related

How can I resize my image proportionally

How can I resize my image like they did here website.
When you zoom in that picture where it says "Radiant Power" , it does not go bigger. Just stays the same size compared to the other elements on the site.
Can you guys give me some tips on how to do that, I can't seem to find the answer anywhere.
Here's my website: site
It's on a free domain so it will load slow.
As you can see I made the big picture work ,because it's 100vw so it's much easier to handle... it stays the same when you zoom in. Now i want the little one to be resized when I zoom in and keep its aspect ratio like that website I showed.
Here's the jsfiddle
That's how I did the large picture resize:
$(function () {
var scr=screen.width;
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else{
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
$(window).resize(function () {
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else {
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
});
});
You just make image scale on percent of total width/height like this:
https://jsfiddle.net/bhdpmhgc/1/
#test{
width: 10%;
height: 10%;
}
<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">

Parallax Effect Adjustment for individual DIVs

I created a parallax effect, as it was described here:
Is there a way to make parallax work within a DIV
This method works pretty well, but I have a problem with it. My page is basically composed of alternating DIVs. White DIVs with text and DIVs with a picture in it, which moves with the parallax effect. This works pretty well, unless, that I have to manually adjust the position of each picture DIV. Here is the code from the header:
<script type="text/javascript">
$(window).scroll(function () {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 100;
$('#ff-section01').css('background-position', 'center ' + y + 'px');
$('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
$('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
$('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
}
</script>
As you can see, each section got another vertical position in the background-position value at the bottom. 0, 1000, 1700, 2750. This works well so far, but as soon as the intermediate Text DIVs change in height, this method doesn't work, as the value is always calculated from the top of the page. The HTML of one section looks like this:
<div class="ff-section03" id="ff-section03"></div>
So very simple, and combined with the CSS:
.ff-section03 {
width: 100%; height: 550px;
position: relative;
background: url('system/urbansolutions.jpg') center -300px no-repeat;
}
Also very simple. What can I do, that the calculations are not dependent of the page height? I basically don't want to subtract a superficial number from the background-position, so that the parallax effect works, not dependent of the location on the website.
Thanks a lot!
Sebastian

Photoswipe: move image container vertically upwards

As the title would suggest, I'm trying to shift the position of the image container vertically upwards (this is in order to give more room for my captions on mobile displays).
It seems that the image container div (class="pswp__img") sits within another div with class="pswp__zoom-wrap". This second div determines the position of the image via the CSS style "transform: translate3d(..)". I have tried parsing through the photoswipe.js script, however my somewhat limited knowledge of JS has me stuck.
Can anyone point me to where in the photoswipe.js script the vertical offset in "transform: translate3d(..)" is set?
Link to github repo containing JS files of interest (photoswipe.js & photoswipe-ui-default.js are the two files to look at):
https://github.com/dimsemenov/PhotoSwipe/tree/master/dist
Below are chunks from "photoswipe.js" which are involved with setting translate3d that I've found so far:
_applyZoomTransform = function(styleObj,x,y,zoom) {
styleObj[_transformKey] = _translatePrefix + x + 'px, ' + y + 'px' + _translateSufix + ' scale(' + zoom + ')';
_translatePrefix = 'translate' + (allow3dTransform ? '3d(' : '(');
_translateSufix = _features.perspective ? ', 0px)' : ')';

White space on right of page

How do I get rid of that undesired white border on the right of the page?
The website basically dynamically resizes images on a grid, here's a video: https://vine.co/v/h2wtnw6K3H0
CSS:
body {
height: 100%;
width: 100%;
margin: 0;
}
grid {
height: 100%;
width: 100%;
}
.gridImage {
vertical-align: bottom;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
JS:
function resize() {
console.log($(window).width());
var newBody = "";
for (var i = 0; i <= 100; i++) {
newBody += '<img class="gridImage" src="Images/image2.jpg" width="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px" height="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px">';
}
document.getElementById("grid").innerHTML = newBody;
}
If my margins are zero, why is this showing up? Anything I'm missing? Thanks.
Ridcully has covered what the problem is, but here’s a solution.
First you would need to calculate the desired width of each image. This is simply your current equation wrapped in Math.ceil().
var windowWidth = $(window).width() // A slight performance improvement, plus cleaner code
var maxImageWidth = <your value here>
var unroundedImageWidth = windowWidth / Math.floor(windowWidth / maxImageWidth)
var roundedImageWidth = Math.ceil(unroundedImageWidth)
Unless your images fit perfectly, this will make each row slightly wider than the window, causing the final image on each line to wrap to the next. To prevent this, you need to set the gridContainer’s width to that of each row.
$('.gridContainer').width(windowWidth * roundedImageWidth / unroundedImageWidth)
Everything should look good, except for one thing: the horizontal scrollbar. This is easily fixed, however. Add this to your CSS:
.gridContainer {
overflow-x: hidden;
}
This will hide both the scrollbar and the final few pixels on each line. Perfect! Well, not quite.
The problem with this method is that one image per row takes the hit (loses pixels) for all of the others. If you have small images and a lot of images per row, you could end up losing a significant portion of your final column.
To avoid this, you can round your image widths upwards and distribute the overflow amongst all images in the row. This is a little more complicated than the previous method, but it does give a better result.
There are three more numbers you need to calculate.
var imagesPerRow = windowWidth / unroundedImageWidth
var numOfRows = Math.ceil($('.gridContainer img').length / imagesPerRow)
var spillage = windowWidth / roundedImageWidth - windowWidth // Pixels we have to lose
Now it’s just a matter of distributing the spillage.
var i = 0 // Loop counter
while (spillage !== 0) {
// Set the width of all images in column i to the width of that column - 1
$('.gridContainer img:nth-child(' + imagesPerRow + 'n-' + (i+1) + ')')
.width($('.gridContainer img:nth-child(' + (i+1) + ')').width() - 1)
spillage--
i++
}
There should no longer be more than a single pixel difference between the widths of the images.
It's because of rounding errors. What you do is fill the grid with 100 scaled images, depending on the browser to wrap to a new line when the image doesn't fit in the current row any more.
Now imagine a width of 305 pixels. Your formula gives an image width of 100 for that, so you get 3 images in a row and the next one wraps to the next row, leaving 5 pixels blank at the right border.
i think you should also add padding:0; to body its missing from your code.
Try it and even better just make a jsfiddle then it would be easier to check for everyone.

Randomize image position with JQuery and HTML

I have this :
<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
I want that the propierty "top" and "left" change every time you enter into the page. I mean that some times it appear on the right top corner, right bottom corner, left top corner and left bottom corner..
Here it is what i have tryied:
http://redzer.com.mx/tabla.html
I would probably start with the div styled as position:fixed and with display:none:
<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
Then use jQuery to determine the position CSS to set and turn on visibility
$(document).ready(function() {
// get jQuery object for the div
var $randomp = $('#randomp');
// determine whether to show top or bottom, left or right
var top = Math.round(Math.random()); // generate 0 or 1 value
if (top === 1) {
$randomp.css('top', '3px');
} else {
$randomp.css('bottom', '3px');
}
var left = Math.round(Math.random());
if (left === 1) {
$randomp.css('left', '3px');
} else {
$randomp.css('right', '3px');
}
// show the div
$randomp.show();
});
Of course, you could also use server-side code to do this, but since you asked specifically about javascript/jquery in your tags, I suggested this solution.
I think i got exactly what you need.
EXAMPLE
With javascript i am generating random numbers for the top and left positioning of your image every time you visit the page.
Right now i set them up to get a random number between 0 and 100 but you can change that to whatever you want.
var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});

Categories