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>
Related
I have a lot of elements (bootstrap html) that behave responsive on a website. This means that they do not have a fixed width or height.
In each element an image should be displayed.
I tried to work with height or width100% values. Also min-height or min-width I have tried. I also tried it with a div and its background-image.
I also found this similar posts on Stackoverflow:
Wrap image in fixed height and width
Displaying images with adaptive width and fixed aspect ratio
Unfortunately, the first post based on fixed height and width. The second post is very helpful, but I search for a solution without using JavaScript (if this task is not solvable with pure HTML and CSS, I would try it with JavaScript).
I work with default bootstrap elements like this.
<div class="row">
<div id="element1" class="col-sm">
<img id="img1" src="1.jpg" />
</div>
<div id="element2" class="col-sm">
<img id="img2" src="2.jpg" />
</div>
<div id="element3" class="col-sm">
<img id="img3" src="3.jpg" />
</div>
</div>
All images should have the same width and height, although the image files have actually not the same width and height on file system.
If the images are too small or too large, the image should be scaled. If the ratio of height and width should not be correct, only a matching section of the image should be displayed.
Of course I do not expect finished solutions, but I would be very happy about approach ideas.
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.
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
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 tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.