CODEWITHSUNDEEP
javascriptjqueryhtml
Garrettj944
Garrettj944

Reputation: 325

How to center images in a custom slideshow

Fixed. Here is the working code:

var cont = $(".portfolio-main-carousel-wrap article.gallery-item");
cont.each(function() {
    var $this = $(this);
    var h = $this.height();
    if (h > 550) {
        $($this).css('margin-top', + (h-550) / -2 + "px");
    }
    else {
        $($this).css('margin-top', + (550-h) / 2 + "px");
    }
});

My slideshow has portrait and landscape images, and I'm trying to center them. I've got the jQuery working, but I can't apply it to all of the images in the slideshow, as all images are different and need to be calculated.

Here is what I have so far:

//Javascript
var img = $("#portfolio-main-carousel article.gallery-item img");
var h = img.height();
if (h > 550) {
    $("#portfolio-main-carousel article.gallery-item").css('margin-top', + h / -4 + "px");
}
else {
    $("#portfolio-main-carousel article.gallery-item").css('margin-top', + (550-h) / 2 + "px");
}

//Example of slideshow HTML
<div id="slideshow">
    <article>
        <a href><img></a>
    </article>
    <article>
        <a href><img></a>
    </article>
    <article>
        <a href><img></a>
    </article>
</div>

This jQuery just grabs the first image in the slideshow and applies the fixing margin to all of the images. I tried using an array with a loop that applies it, but couldn't get it to work. Any recommendations would be much appreciated!

*Edit - Here's the array code for reference:

var array = $('#portfolio-main-carousel article.gallery-item').get();
for (i=0; i<array.length; i++) {
    var $img = $(array[i] + ' img');
    var h = $img.height();
    if (h > 550) {
        $(array).css('margin-top', + h / -4 + "px");
    }
    else {
        $(array).css('margin-top', + (550-h) / 2 + "px");
    }
}

I get an error of Syntax error, unrecognized expression: [object HTMLElement] img

Upvotes: 0

Views: 57

Answers (3)

Alexander
Alexander

Reputation: 161

I think you could use plain css if you have a relative or absolute position to the article tag , i can't tell because you haven't added any css. You could try and write this code to you css file...

article img{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}

Upvotes: 0

Rauli Rajande
Rauli Rajande

Reputation: 2020

Do your calculation for each separately:

var $img = $("#portfolio-main-carousel article.gallery-item img");

$img.each(function(){

    var $this = $(this);
    var h = $this.height();

    if (h > 550) {
        $("#portfolio-main-carousel article.gallery-item").css('margin-top', ($this.closest('#slideshow').height() - $this.height())/2 + "px");
    }
/* homework...

    else {
        $("#portfolio-main-carousel article.gallery-item").css('margin-top', + (550-h) / 2 + "px");
    }
*/

});

(More specific answer needs sample html and existing css rules.)

If you want more uniform solution but without calculations, you can use different css approaches, like:

Upvotes: 1

Geuis
Geuis

Reputation: 42277

You have a few options, but they depend on how you want the images to behave. These solutions use css. You shouldn't need to do any javascript for your problem.

  1. If the images should cover the all of the available space in each <article>, then set them as a background with css and used background-size: cover or use object-fit: cover without setting them as a background. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

  2. Set the <article> element to display:flex, then set align-items: center and justify-content: center.

Upvotes: 0

Related Questions