Photoswipe: move image container vertically upwards - javascript

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)' : ')';

Related

How to set Images in Center while even images?

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.

spawn div in random position using hover function, Jquery

I'm trying to make a website containing a div that changes its position to a random location using jquery's hover function. So far, the only way I've gotten it to work is to apply the function to a separate, fixed button that moves the div around when you hover over it.
Why can't I just apply the same javascript function to the div class "rand"?
I'm trying to make a website containing a div that changes its position to a random location using jquery's hover function. So far, the only way I've gotten it to work is to apply the function to a separate, fixed button that moves the div around when you hover over it.
Why can't I just apply the same javascript function to the div class "rand"?
$('.new_pos').hover(function() {
var bodyWidth = document.body.clientWidth
var bodyHeight = document.body.clientHeight;
var randPosX = Math.floor((Math.random() * bodyWidth));
var randPosY = Math.floor((Math.random() * bodyHeight));
var posLog = document.getElementById('pos_log');
var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY;
$('#rand_pos').css('left', randPosX);
$('#rand_pos').css('top', randPosY);
posLog.innerHTML = posXY
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rand_pos" class="rand"><img src="Media/MargeDancing_Test01.gif"></div>
<button class="new_pos">Remember</button>
I got the source code from this website: https://codepen.io/kaypooma/pen/tAfwm
The div doesn't have a position property, therefore top and left have no effect.
#rand_pos {
position: relative;
}
https://jsfiddle.net/calder12/54qfvgnm/1
I'd also suggest using mouseover instead of hover, it's a little less flaky on hover
https://jsfiddle.net/calder12/54qfvgnm/2/

Changing -webkit-mask-position through javascript

I'm working on an iPad webview project that requires a slider to move back and forth over two pictures, revealing one or the other when sliding to the left or right. Due to project restraints, I can't utilize jQuery. I currently have the left picture on top with a transparent mask over it and when the -webkit-mask-position is increased, it reveals more of the bottom picture, when decreased, more of the top (covering the bottom one).
I'm using a javascript plugin called Draggy (https://github.com/jofan/Draggy) to move the slider back and forth and want to use its onChange function call to update the position of the mask, but I can't figure out what javascript calls "-webkit-mask-position" to save my life.
Any ideas?
PS: webkitMaskPosition adds style="-webkit-mask: XX" to the element, which I COULD use (filling in the other values in the js), but it's being really buggy. I'm looking into it now.
OH MAN I GOT IT.
var maskSlider = document.getElementById('molecule');
function moveMask(x, y) {
var xx = x - 285;
var z = "-webkit-gradient(linear, left center, right center, color-stop(0.5, black), color-stop(0.5, transparent)) no-repeat scroll " + xx + "px padding padding";
maskSlider.style.webkitMask = z;
}
The -285 is to get it to line up to where the slider is on the image. I have no idea if I'm really doing this the right way, but it worked. If anyone can think of a better/ more efficient way to do this, please let me know.
I've recently worked a lot about webkit masks which are using CSS3 gradients to make transitions between images.
I preferred to append a style tag to head tag which is made dynamically by my calculations. And also I used CSS3 animation too. Something like this:
var cssStr = '<style id="myTransition">.myTransition_wipe{' +
'-webkit-mask-size: 200% 200%;' +
'-webkit-mask-repeat: no-repeat;' +
'-webkit-animation: wipe 2s;' +
'-webkit-animation-direction: normal;' +
'-webkit-animation-iteration-count: 1;' +
'-webkit-animation-fill-mode: forwards;' +
'-webkit-mask-position: offsetLeftS 0;' +
'-webkit-mask-image: -webkit-gradient(linear, left top, right top, ' +
'color-stop(0%, transparent), color-stop(20%, transparent), ' +
'color-stop(25%, transparent), color-stop(30%, transparent), ' +
'color-stop(50%, rgba(0, 0, 0, 1)), color-stop(98%, rgba(0, 0, 0, 1)), ' +
'color-stop(100%, rgba(0, 0, 0, 1)));}' +
'#-webkit-keyframes wipe {' +
'0% { -webkit-mask-position: offsetLeftS 0; }' +
'100% { -webkit-mask-position: offsetLeftD 0; }' +
'}' +
'</style>';
var compStyle = getComputedStyle(currentElement);
var width = parseInt(compStyle.getPropertyValue("width"));
var height = parseInt(compStyle.getPropertyValue("height"));
cssStr = cssStr.replace(/offsetLeftS/g, '-' + (width * 1) + 'px');
cssStr = cssStr.replace(/offsetLeftD/g, '+' + (width * 1) + 'px');
$('head').append(cssStr);
When I want to apply a transition, I remove the style tag by its ID and remove the class myTransition_wipe from element too, then append a new one to head tag and add the class name to element too.
Pay Attention: You must store the styles that element should have after the animation is finished and add them right after the animation is finished. Otherwise, when you remove class name and style tag, everything will be reset.
Good Luck

Detect the percentage of the horizontal position that users click on

I'm trying to make a slider from scratch like the jQuery UI one but i'm not sure how to detect the horizontal position where the user clicks on the slider.
Example, if i click on foo div in the middle, it'd return 50%. If i have that it would be easy for me to adjust the slider's filler div width accordingly.
Try this fiddle: http://jsfiddle.net/UCFtB/1/
Script:
$("#test").mousemove(function(e){
var perc = e.offsetX/ $(this).width() * 100;
$(this).html(e.offsetX + " | " + perc + " perc");
});

How do i make "facebook zoom"

Im making a website, and i love the functionality of this google chrome extension call Facebook Photo Zoom # https://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipi
I think the essential idea behind the extension is when you hover over the thumbnail, it grabs the original image file and displays it in full view. If the image is too big, then it will be position on the corners or the top and bottom bars of the window. If it is not too big, it will float next to the mouse position.
The logic behind it i understand, but the actually coding seems to be a bit daunting. I guess the only parts of it i dont understand is how do you code the positions of the expanded images and make them contract/expand when you move your mouse to the left/right. Thanks
13 zoom jquery plugins in here. Choose the best for your needs:)
on mouseover you create big image with
css({position: 'absolute', left: e.pageX, top: e.pageY})
on mousemove you update the left and top in the same way.
check also:
http://api.jquery.com/event.pageY/
http://api.jquery.com/css/
http://api.jquery.com/event.pageX/
Check out this preview image tooltip which is similar to what that Chrome extension does, but you have to provide it the url to the thumbnail and full sized image. Here is the original blog post.
I modified the script to adjust the image size to fit the distance between the cursor and right browser edge. It's not perfect, but it works. Here is a demo.
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$('a.preview').hover(function(e){
this.t = this.title;
this.title = '';
var p, c = (this.t != '') ? '<br/>' + this.t : '';
$('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>');
// load image and get size
p = $('#preview');
p
.fadeIn('fast')
.find('img').load(function(){
// get image dimensions after it has been loaded
p.data('widths', [ $(window).width(), p.find('img').width() ]);
// set image to 100% to fit in preview window
$(this).width('100%');
position(e);
});
},
function(){
this.title = this.t;
$('#preview').remove();
});
$('a.preview').mousemove(function(e){
position(e);
});
var position = function(e){
var w, prevw = $('#preview'),
w = $.data( prevw[0], 'widths' );
if ( w ) {
prevw
.css('top', e.pageY + yOffset)
.css('left', e.pageX + xOffset)
.css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ? w[0] - e.pageX - xOffset : w[1] || 'auto' );
}
};
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
See the Kabbar Image Zoomer at http://www.ideabonus.com/Kabbar/index.html

Categories