CODEWITHSUNDEEP
jqueryorientationgalleryaddclassflickity
Typetecture
Typetecture

Reputation: 25

JQuery. Change container width based on orientation of img within

I need to size a container based on the orientation of the img that is in it. So as to have a width:50% container for portrait images and a width:100% container for landscape images.

The JQuery i was able to come up with, does not work. It just adds one of the two classes independant of the content it seems.

Javascript:

$(".galleryelement").addClass(function() {
        if (".galleryelement img".height > ".galleryelement img".width) {
            return "portrait";
        } else {
            return "landscape";
        }
});

Rough HTML:

    <div class="gallery">

      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>  

    </div>

CSS:

.portrait {
    width: 50%;
}

.landscape {
    width: 100%;
}

I produced a Fiddle to illustrate the problem: JSFiddle

Hope someone spots my mistakes and can help. The code uses the flickity slider.

Upvotes: 1

Views: 1393

Answers (3)

Mousey
Mousey

Reputation: 1865

Your jsfiddle only runs on document ready - and only for the first image - as well as the jquery not working.

This is a fiddle https://jsfiddle.net/wgqdsnmk/10/ that does not need a new class to be applied and searches through evey image to swap the height and width around before they are shown. It does not assume that 50% width is best for portrait, and runs only one. It uses less CSS.

It runs for every image on the page but if you add the same class name to each image in the HTML and use getElementsByClassName (instead of getElementsByTagNname) it will not alter other images. Another option could be improved further by removing the for loop and running it when the Next button is clicked rather than on document ready. No HTML changes are needed. 

$(document).ready(function() {
 var el = document.getElementsByTagName("img");
 for (i = 0; i < el.length; i++) {
     if (el[i].height > el[i].width) {
     } else {
    el2 = el[i].width;
    el[i].width=el[i].height;
    el[i].height=el2;         }
 }
$('.gallery').flickity({   
// options
cellAlign: 'left',
contain: true,
setGallerySize: false
});
});

CSS

.gallery {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
display: block;
}

.galleryelement {
height: 500px;
background-color: #e6e6e6;
overflow: hidden;
}

img {
 max-height: 500px;
}

Upvotes: 0

Andreas
Andreas

Reputation: 21911

".galleryelement img" is a valid selector but doesn't yield you a jQuery object containing the matching elements.

After fixing this ($(".galleryelement img")) the next step would be to call the method .height(). Without the parentheses this would give you the function itself and not the return value after calling it.

With this we have now:

$(".galleryelement img").height()

The same has to be done for the second part of your if condition.

$(".galleryelement img").width()

The if condition would now be

if ($(".galleryelement img").height() > $(".galleryelement img").width())

Now we don't compare undefined with undefined :)
But this doesn't produce the expected result yet.

".galleryelement img" returns all images matching this selector but you only need the image of the current .galleryelement. And because we don't want to create a jQuery object for the same image twice we save the object in a variable and use that in the if

$(".galleryelement").addClass(function () {
    var img = $(this).find("img");

    if (img.height() > img.width()) {
        return "portrait";
    } else {
        return "landscape";
    }
});

fiddle

Upvotes: 3

guvenckardas
guvenckardas

Reputation: 738

Meybe you can use CSS3 solution like the code below:

@media only screen
and (orientation:portrait)
and (max-aspect-ratio: 13/9)
{
.galleryelement{
    width: 50%;
 }
}

@media only screen
 and (orientation:landscape)
 and (min-aspect-ratio: 13/9)
{
 .galleryelement{
    width: 100%;
 }
}

Upvotes: 0

Related Questions