I want to show a part of next slide (10%), then when I move over that part of next slide it will show (30%).
Something like this: http://karimrashid.com/
Here's what I did till now:
<script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script>
<h2>Show the left and the right slides</h2>
<div class="slideshow-container">
<div class="slideshow responsive"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-carousel-visible=1
data-cycle-carousel-fluid=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
</div>
</div>
CSS Code:
.slideshow-container {
overflow: hidden !important;
width: 50%;
}
.slideshow {
overflow: visible !important;
width: 90%;
margin-right: 10%;
}
http://jsfiddle.net/CairoCoder/x89sQ/259/
Is there's any existing slider that can do the trick?
why do you want to look some other slider. use what has used in that existing site.
http://karimrashid.com/js/script.js
Please let me know if you need further help.
Related
I have a bootstrap 4 page with an image that can be changed by the user interacting with several dropdowns. Based on the selected options, the image source is changed. The images are fairly large, so loading the requested image takes some time. I'd like to display a loading spinner on top of the image while the new image is being loaded, so the user knows that their action had some effect.
It seems like the built-in bootstrap spinners need their own div, so I thought a gif like this could work if placed on top of the image: https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp However, I'm not sure how to place it on top of the image and trigger the events necessary to show/hide it. Since my columns are not fixed-width, I want to display the spinner on top of the image rather than swapping the image source for the spinner, so all of the content remains in the correct positions.
Example code:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-auto" style="background-color:red;">
<h2>Column 1</h2>
</div>
<div class="col-12 col-lg-auto" style="background-color:green;" >
<h2 class="header-2">Column 2</h2>
<img class="img-fluid" src="https://via.placeholder.com/500x350">
</div>
<div class="col-12 col-lg-auto" style="background-color:blue;">
<h2>Column 3</h2>
</div>
</div>
</div>
First, right after the tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
$(window).load(function() {
$('#loading').hide();
});
</script>
Finally, adjust the position of the loading image and the background-color of the loading div with the style class.
This is it, should work just fine. But of course you have to have an ajax-loader.gif somewhere. Freebies here. (Right-click > Save Image As...)
I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.
edit:
http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead
How can I vertically centered an image, based on the container height.
Given the container height is fixed, and the image size is dynamic.
Currently only top part of the image is shown as we use overflow: hide;.
Thanks
You can set the image CSS to height: 100%.
Please provide some codes, so that we can help you further with your problem.
Photoshop
The easiest solution is obviously photoshop here; you can just resize the images.
CSS
You can use the CSS property background-image for this. The img tag is not made to hide parts of the image, only to resize.
To do this, you can use the following example:
background-position: 0px -60px;
That property is the key to create a background image that fits in your slideshow. However; you will need to manually change that for all images.
Example for you to use background-position:
.slider-nav-crop4 {
/*this is your image with ~60px white space above */
background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -60px;
}
<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
</div>
Positioning the image
This is actually a hack that can be set per image, but it could be a little tricky.
You can position the images absolute, give them a negative top setting and make the images larger then the container, setting overflow:hidden.
example
.item .crop-image {
height:200px;
position:relative;
overflow:hidden;
}
.crop-image img {
position:absolute;
top:-40px;
height:300px;
}
<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">
<div class="item item1" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 active left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 next left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
</div>
</div>
</div>
Lets say your code is,
<div class="image">
<img scr="Image_path" alt="" />
</div>
CSS
.image{
position: relative;
}
.image img{
margin: auto; //horizontally align center
position: absolute; //vertically align center
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Hope this will work.
Method 1:
container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}
Method 2:
container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 3:
container {
height: 300px;
line-height: 300px;
}
In css vertical alignment is a very discussed topic, this is 3 of many examples. Use the best for you.
I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/
I'm looking for a slider which you can have a background image e.g. 1920px wide 400px high, but the main content of the slider is something like 1000px, the slider will automatically scale down until it gets to the center of the image? A little like http://www.morganstanley.com/.
I've had a look at JSSOR but for the life of me I can't figure out how to do it.
Thanks for reading
Please place your slider in the following wrapper,
<div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
<div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="position: relative; margin: 0 auto; ...;">
...
</div>
<!-- Jssor Slider End -->
</div>
</div>
You will get get an example as http://www.jssor.com/testcase/auto-center-slider-with-no-scale.source.html