I am using GlideJS to display a carousel with images. I load this carousel in file A (carousel-test.php) by calling the following code:
<div id="carouselContainer"></div>
<script>
$( "#carouselContainer" ).load( "carousel.php" );
</script>
File B (carousel.php) contains the code of the carousel with the images:
<div class="module module--horizontal">
<div id="Carousel" class="glide">
<div class="glide__wrapper">
<ul class="glide__track">
<li class="glide__slide">
<div class="box" style="background-color: #77A7FB;">
<div>
<img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" />
</div>
</div>
</li>
<li class="glide__slide">
<div class="box" style="background-color: #FBCB43;">
Second slide
</div>
</li>
</ul>
</div>
<div class="glide__bullets"></div>
</div>
<script>
var carousel = $('#Carousel').glide({
type: 'carousel',
startAt: 1,
touchDistance: 2,
autoplay: 0,
autoheight: true
});
</script>
The problem is when you open file A (http://reistip.nl/carousel-test.php ) the first time, then the height of the image in the carousel is very small. The height should be 100% but is instead fixed to (about) 20 pixels. Once you start using the carousel, refresh the page or open the console.log the height of the image changes and becomes as it should be (100%).
How can I display the height of the image in the carousel to 100% when the page is opened for the first time?
(note: to reproduce this problem make sure to open a new tab in the browser after visiting file A, if you only refresh the page of file A the problem does not appear again)
you can't change the height of image by giving 100% because. an image height is already a 100% to it's height. if you really want to change the height of your image then you should define it in px value but i suggest you not to change the height because it will stretch your image. instead you can add certain height to your carousel wrapper and set overflow hidden. it will show the image inside wrapper and the overflow image will be hidden.
Related
I am creating multiple dynamic divs of fixed height inside a main div. I can't change the fixed height to % height because it has to have a fixed height even if its empty because user drags elements onto these divs afterwards. Now i am using the Full Screen API to enlarge the main div to full screen. and i want the inside divs to grow their height as the screen enlarges.
On Small Screen it looks like this
On Full Screen it looks like this
on full screen the inside divs adjusted their widths accordingly because they have taken widths % vise but the height of divs doesn't increase because its fixed pixels. The red area in the second image shows the empty space when in full screen mode. how could this area be taken by the divs
The actual code of this is too much complex and lengthy so i am writing here a sample code to understand the problem
<div id="main">
<div Class="Row">
<div Class="Col-md-6">
<div id="A" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="B" style="height:100px;width:50%">
</div>
</div>
</div>
<div Class="Row">
<div Class="Col-md-6">
<div id="C" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="D" style="height:100px;width:50%">
</div>
</div>
</div>
Like i said that divs A,B,C and D are created dynamically. Now i apply a full screen function on main div
var element = document.getElementById("main");
element.webkitRequestFullscreen();
The main div gets to Full screen but the divs A,B,C and D do not adjust their height accordingly.
write a media query like this->
#media screen and(min-width:fullscreenswidth) {
.yourdiv {
height:100vh;
}
}
The fullScreenWidth is the size of the screen in pixels
I bought Revolution Slider plugin for HTML (not wordpress) and i have wierd problem.
So i tried putting example slider on my page, and instantiate it, and everything works. I want full width slider with 420px height... But when i putt 420px in initialization of slider, i dont see textual content, because image gets to much in width and it makes overflowed slider thats hidden below content.
I dont know how to have full width image acting like background-size:cover in css... I dont want it to have auto height.
<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
<div id="slider1" class="rev_slider_wrapper fullwidthbanner-container" data-version="5.0">
<ul>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide1.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide2.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
</ul>
</div><!-- END REVOLUTION SLIDER -->
</div><!-- END OF SLIDER WRAPPER -->
and tihs is init
jQuery(document).ready(function() {
jQuery("#slider1").revolution({
sliderType:"hero",
sliderLayout:"auto",
delay:9000,
navigation: {
arrows:{enable:true}
}
});
});
i tried here in init to put gridheight, gridwidth, sliderType:"fullwidth", sliderType:"standard", but none of that gives me fixed max width on image :S image is 1440x430, and i want it to take full width, and height as it can be, without stretching and taking more then those 430px.
What am i doing wrong. Here is no css at all, its bootstrap used, and no custom css on slider
In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
I'm using the simple.carousel.js for a simple small slider, where there is an image and some text. As you may know, this plugin uses the <ul> tag to slide the <li> elements. You can set the width and height of the carouselslider in javascript like
> $("ul.homecarouselslider").simplecarousel({
> height:200,
> width:160,
> visible: 1,
> auto: 25000,
> next: $('.offerright'),
> prev: $('.offerleft') });
If you dont set those dimensions in javascript, the .js file has default sizes to set. But i want this plugin to have different dimensions for each <li> element, because there is a larger image in it, or bigger text. If you exceed this height because the text has 250px height instead of 200px which is the limit for the slider, it doesnt display it. Any ideas how in this slider, the <li> elements can get the dimensions of the inner divs? Thank you in advance :)
PS. The html code is something like this:
<div id="offers">
<ul id="homecarouselslider" class="homecarouselslider" style="list-style-type:none;overflow:hidden;width:600px;height:190px;">
<li style="float:left;width:160px;height:190px;">
<div id="offer1">
<div id="offertitle"><?php echo $row['title']; ?></div>
<img id="offerimg" src="<?php echo $row['picture1']; ?>">
<div id="offerdesc">
<div id="offerdesctext"><?php echo $row['full_description']; ?> </div>
<div class="offerleft" id="offerleft"><img src="images/offerleft.png"> </div>
<div class="offerleft" id="offerright"><img src="images/offerright.png"></div>
<div id="offerbook">BOOK NOW</div>
</div>
</div>
</li>
</ul>
</div>
Why won't you use a maximum height for the carousel? The maximum height of a li element. Because I'm assuming that there is content under the carousel, and if you would implement it as you say, the content at bottom of the carousel would 'bounce' when you hva different heights.
If you still want that behavior, I recomand you to see if there is an overflow:hidden set to ul element, that I thinks that i set by carousel.js, and change it in your css file with overflow:visible !important.
Just remove the overflow:hidden for slider and use a bigger image.
Updated fiddle
I am using the new flex slider and I want to retain the dimensions of my images. It keeps re-sizing the images no matter what options that I use. Has anyone hard-coded, and option where you can retain a certain height and width for your FlexSlider viewport?
Are you using Flexslider 2
Try using a containing element with a class like, .flexcontainer, and with a set width or max-width in your css to match the width of your images:
<div class="flexcontainer">
<div id="my-slider" class="flexslider">
<ul class="slides">
...
</ul>
</div>
</div>