CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matt Hintzke
Matt Hintzke

Reputation: 7984

CSS Display affects jQuery/Javascript?

I have run into a strange phenomena I believe and I was wonder if anyone has a the answer to why this occurs. I have been doing a lot of manipulation of images for a photography site using a custom jQuery slideshow I created and have run into some problems.

I have a gallery here: http://www.daemondeveloper.com/photography/gallery.php

I have been adding some functions that resize the images in this gallery so that they scale to the size of the preview image size. As you can see, the very last image is panoramic and does not fill up the entire height of the div even though I have javascript telling it to resize.

If you refresh the page, the javascript seems to work all of a sudden and the pictures scales how it should.

Now try clicking on the panoramic picture of the girl and my slideshow will appear displaying the image scaled and centered vertically using jQuery. The function below is what handles clicking on the small image previews in the gallery.

If you look at where the commented changeSize() function is, that is where I USED to have the function and the scaling did not work. Then I moved it after the .show() functions which show my slideshow and now it works. So it appears that the display:none; affected how the javascript fired because when I debugged, the currentImg object was null, as if the .slides selector did not exist when it was set to display:none;. Is this really happening or am I just seeing a side effect of something else?

If this is really happening it may have something to do with the cause of the first problem I stated about the panoramic image not scaling on the first load of the gallery.php page.

$('.imgHolder').click(function(){
    currentPosition = $('.imgHolder').index(this);

    $('#slideShow').width(slideWidth);

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides.css({
    'float' : 'left',
    'width' : slideWidth
  });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', (slideWidth * numberOfSlides));

    // Hide left arrow control on first load
    manageControls(currentPosition);

    $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));

    //changeSize(); used to be here

    $('#filter').show();
    $('#photoWrap').show();

            //Change image scale and center
    changeSize();
});

And here is the changeSize() function that does the scaling and centering

 function changeSize(){

  currentSlide = $('.slide').get(currentPosition);
  currentImg = $(currentSlide).children('img:first')[0];
  imgRatio =  $(currentImg).height() / $(currentImg).width(); 

if(imgRatio < slideRatio)
{
    $(currentImg).addClass('landscape');
    //Vertically align
    var thisHeight = $(currentImg).height();
    $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

}else{
    $(currentImg).addClass('portrait');
}


}

Upvotes: 1

Views: 261

Answers (1)

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

$('#gallery ul li').each(function() {
    var img = $(this).children('div').children('img').first();
    var ratio = img.height() / img.width();
    var goal = img.parent('div').height() / img.parent('div').width();

    if (ratio < goal) {
        img.addClass('portrait');

        img.css('margin-left', -(img.width() / 2) + ($(this).children('div').width() / 2));
    } else {
        img.css('width', '100%');
    }
});

Here I removed the unnecessary $() instances from your code, as you have already selected the element that you wish to call your methods on when you set the img variable. I doubt that this redundancy is the ultimate issue, but it is a good place to start.

 

Update your code to this and let's debug from there.

EDIT:

I think I found your error (well, I found one at least):

function configGallery()
{

var currentPosition;
var slides = $('.slide')
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
...
}

Do you see what's wrong here? You forgot a semi-colon after var slides = $('.slide') and that could be your issue. Honestly, I'm surprised any of your scripts ran at all. Missing semi-colons usually crash the whole thing.

UPDATE:

Here are a few more selectors for you to remove the $() from when you get a chance:

function changeSize(){

      currentSlide = $('.slide').get(currentPosition);
      currentImg = $(currentSlide).children('img').first();
      imgRatio =  $(currentImg).height() / $(currentImg).width(); 

    if(imgRatio < slideRatio)
    {
        $(currentImg).addClass('landscape');
        //Vertically align
        var thisHeight = $(currentImg).height();
        $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

    }else{
        $(currentImg).addClass('portrait');
    }
}

 

UPDATE:

Okay I wrote you a little fiddle to help you re-write your image-sizing function. I'll work on prettying it up and putting it in a plugin for you.

UPDATE:

Here's the same function again in a quick and dirty plugin: http://jsfiddle.net/Wj3RM/3/ I didn't pretty it up though - I figured it would be easier for you to adapt and modify like this.

Upvotes: 1

Related Questions