Bootstrap thumbnail alignment (horizontal) - javascript

I added the thumbnail class to my thumbnails div, which had the intended effect. However, some of the thumbnails were smaller in size than the others. I wanted them to have the same height so I gave each thumbnail a height of 210px, thinking that would now appear the same all aligned horizontally in a line. However, setting the height had the strange effect of making the smaller thumbnails jut out of the alignment by extending below. I tried solving this by setting the css property of top: 0px; on each thumbnail, but that did not make any difference. How can I get all my thumbnails to be the same height AND be perfectly aligned horizontally?

The problem was eventually solved by adding style element overflow: hidden; to the thumbnail class.

If you are using bootstrap, did you try putting each image in its own div class for columns? If you are at all thinking of responsive design (which is why one typically uses bootstrap) this might help you get them to align extremely quickly and easily.
http://getbootstrap.com/2.3.2/scaffolding.html, take a look at the live fluid grid part.

Related

Thumbnail fix in Blueimp Image Gallery

I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature

Flexslider slide with centered image in fixed aspect ratio div

I am using a theme which employs the flexheader to show banner images. Since it's a theme, I cannot really modify the options of the slide show directly and am trying to work around it.
What I want is height of the banner to stay the same. 16:9 images use the entire banner space, but lower aspect-ratio images are centered with solid background color around them.
So I am trying to pass a particularly styled div as list item (slide): I create 16:9 div and solid gray background.
Here is an example, which mostly works, but the slide with the logo is stretched. How can I keep the image aspect ratio and keep the image in the horizontal center? Or is there a much easier way to achieve what I want?
To achieve what you want, you need to remove the height: 100% !important from the image element, because that piece of code is stretching it.
.flexslider .slides img {
width: auto;
}
But the image wont be filling the whole slider area, as there will be a gap on both sides, but it wont be stretched. To make the images fill the whole slide, you would need to upload the image in the correct size. Hope you understood what I've meant.

Correct CSS / JS parameters to fill div

I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.

Jcarousel - only first slide shows

So I'm working on a website where jcarousel was implemented.
I'm trying to convert the website to responsive and I have a problem with jcarousel plugin.
Problem is:
The jcarousel below 961px has a media queries both in CSS and in JS, where the width and height of the containers is set in order to fit the screen.
However, only the first slide shows, as the rest are blank.
Could you please tell me, whether it's a JavaScript/jQuery problem or purely CSS?
Thanks for any answers!
You have a width: 100% (and in media query width: 1030px;) set on #large-banners li. With these widths they can't float next to each other, instead they will line next under each other.
I managed to solve my own problem which was caused by both, CSS and JS.
I simply had to remove the width:100% form #large-banners li and set its width (with the use of jQuery) to match the width of the parent container.
Apparently, width in pixels allowed the content to be shown.

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.

Categories