I made a custom slide-transition with jquery cycle plugin which make the use of options: cssBefore, animIn, animOut necessary.
There are two slideshows with different widths side by side on desktopview with a fixed width.
There is a media query breakpoint, where the shows get one below the other and are supposed to get a width of 100%, which works fine so far, except one thing:
Because the cycle option accepting number values (for px) only, the transition don't adapts to the width of 100%.
Question is:
How can I make it so, that relative values are accepted?
And if this is not possible, is there another slider which offers the same transition as shown in the following example?
My Code:
HTML:
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>
Javascript:
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});
CSS:
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
#media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}
See the example on jsfiddle
I am not sure if there is any plugin BUT you can use Media Queries for example:
#media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}
this css will be executed when the screen size is less than or equal to 600px ONLY. and if the screen size is more than 600px your main css will be executed.
For full documentation about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media query demo: http://www.webdesignerwall.com/demo/media-queries/
I hope this helps.
Related
this is my first question on stackoverflow.
Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.
image
Thanks in advance!
edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 7,
slidesToScroll: 6,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 4
}
}, {
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
margin: 50px;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: blue;
}
#media screen and (max-width: 768px) {
.slick-dots {
position: initial !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x300?text=1">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/550x300?text=2">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
</section>
Check this:
https://jsfiddle.net/7pa8jq4a/5/
I used to center:
display: flex;
align-items: center;
justify-content: center;
I added wrapper div to slide and to img style max-height and max-width;
I tweaked you version a little bit (in case you do not want flex-box):
https://jsfiddle.net/fr74h8k5/2/
.slick-slide .image {
height: 200px;
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Here is what you need:
1) at first, set section { text-align:center;}
2) set slick-track div to :
.slick-track{
display: flex;
align-items: center;
}
3) and for example
.slick-slide img {
..........
max-width: 150px;
max-height: 150px;
}
thats all (source: How to vertically center divs? )
I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.
The code :
$("#button1").click(function(){
$("img").fadeOut();
});
fades out the whole element but I want to fade specific parts of an image like 4px from top and 2px from left .If CSS3 methods are needed , I am ready to do so.
HTML code:
<div class="container">
<div class="image"></div>
<div class="mask width100 height3 top0 left0"></div>
<div class="mask width100 height3 top0 left3"></div>
<div class="mask width3 height54 top10 left22"></div>
<div class="mask width10 height30 top40 left12"></div>
<!-- more masks goes here -->
</div>
CSS code:
.container {
position: relative;
width: 400px;
height: 400px;
}
.image {
width: 100%;
height: 100%;
background: url(/*your url*/);
}
.mask {
position: absolute;
background: #000;
}
.width100 { width: 100% }
.width10 { width: 10% }
.width3 { width: 3% }
/* etc */
height3 { height: 3% }
height30 { height: 30% }
height100 { height: 100% }
/* etc */
top0 { top: 0 }
top5 { top: 5% }
/* etc */
Your masks have absolute positions, and you can set their sides with .widthXX and .heightXX classes + position about the image with .topXX and .leftXX classes. (this is not ideal method, but it can be done fast)
Than with JS you can detect all that masks (with jQuery - $('.mask')) make an array of objects (if it's needed), and hide tham with .hide() or .fadeOut() methods in line order (0,1,2,3...) or randomly (get random index of array, hide it, and delete element from array).
Hope you understood my thoughts, and will make it better and more interesting :)
I try to make a bigger photo than the div that is containing it to auto scroll vertically.
Also found a nice jQuery plugin jQuery simplyScroll but i can't make it run properly.
Here is my fiddle.
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
customClass: 'vert',
orientation: 'vertical',
auto: true,
manualMode: 'end',
frameRate: 8,
speed: 5
});
});
})(jQuery);
It doesn't scroll to bottom. What i did wrong?
https://jsfiddle.net/h5Lrq9zy/2/
.vert .simply-scroll-clip {
width: 400px;
}
.vert .simply-scroll-list li {
width: auto;
height: auto;
}
Too much hardcoded stuff within the plugin itself. A terrible plugin overall, but yes, you could modified it to be better.
You specified a custom class to use as a container called vert.
So you need to specify CSS for that class like so:
.vert {
width: 400px; /* wider than clip for custom button pos. */
height: 1000px;
margin-bottom: 1.5em;
}
/* Clip DIV */
.vert .simply-scroll-clip {
width: 400px;
height: 1000px;
}
/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
width: 400px;
height: 1000px;
}
Fiddle here.
I am trying to make owl carousel slider full screen for my site.
This is what I need, feel free to resize Your browser
And this is what I have,
fiddle
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
is there any solution to fix it?
Thx
When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.
Another option is to take advantage of vh units. 100vh = 100% of the window height.
Just add 100vh to .owl-item and your div item.
.owl-item, .item {
height: 100vh;
}
A vh unit is defined as:
Equal to 1% of the height of the viewport's initial containing block.
Try this:
html, body {
height: 100%;
margin: 0;
}
.owl-wrapper-outer {
height: 100% !important;
}
.owl-wrapper {
height: 100%;
}
.owl-item {
height: 100%;
}
.b-Amarelo {
height: 100%;
}
.owl-item h1 {
margin: 0;
}
Demo: Fiddle
As you can see there is a slide to the left and the with decreases from 100% to 0 at the same time.
I want to get this same effect but from left to right.
I can't get it right!
jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing');
Example Fiddle: http://jsfiddle.net/RsBNk/
That is pretty simple. Align the image to the right and then decrease it by 25% using jQuery like below:
jQuery:
jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing');
CSS:
.box {
width: 100%;
position: absolute;
top: 0;
right: 0; /* Modified this line */
height: 200px;
background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg');
background-position: right; /* EDIT: This property needs to be set */
}
Updated Demo
May be this helps you
$('#target').animate({
width : '0',
marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ?
$('#target').outerWidth() : 0
}, 1500, 'swing');
check demo