0

I'm working on a simple script that acts as a slideshow. It's based on this script.

Background:

Most of these types of scripts (including the more advanced ones) have the issue that they work great with landscape-style images but really mess portrait-style images up. So I'm trying to build something more or less from scratch.

Problem

I want my images centered on the page. So I use position:absolute; and left:50%; and top:50%; which puts left-most and top-most edge of the image in the proper position. But to center it you would need to do left:50% - imageWidth/2 (which obviously doesn't exist in CSS)

So I need to use javascript to get the image height/width and change it's left and top positioning as needed.

Here is my HTML:

<div class="fadewrapper">
    <div class="fadein">
        <img src="../Content/images/samples/1.jpg">
        <img src="../Content/images/samples/2.jpg">
        <img src="../Content/images/samples/3.jpg">
    </div>
</div>

Here is my CSS:

.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}

My knowledge in javascript is limited, but I've found this script (on SO):

var img = new Image();
        img.onload = function () {
            alert(this.width + 'x' + this.height);
        }
        img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

This script works, but I don't know how to use the images on my page and how to then adjust its positioning. Any and all help is very much appreciated.

Hanna
  • 10,315
  • 11
  • 56
  • 89
  • Check this http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen – Cheery Feb 24 '12 at 21:57
  • @Cheery I've checked your link. Why make simple things complex? – Teemu Feb 24 '12 at 22:45
  • @Cheery: This script seems to center it according to the top-left corner. I'll have to do some digging. – Hanna Feb 24 '12 at 23:11
  • @Johannes if you want to center img with respect to the parent - the script by the link could be easily modified. – Cheery Feb 24 '12 at 23:14
  • @Cheery: Yeah, I got it now. Simply dividing by 4 instead of 2 fixed it for me (not entirely sure why...but it works.) Thank you. – Hanna Feb 24 '12 at 23:17
  • @Johannes Not sure why do you need 4 there. It might be working only for one fixed resolution of the screen. Do you want to center it with respect to the parent or something else? – Cheery Feb 24 '12 at 23:20
  • @Cheery, Birdman has provided a much cleaner and simpler implementation. – Hanna Feb 24 '12 at 23:26
  • @Johannes it is up to you. for me it is easier to use positioning as a jQuery function – Cheery Feb 24 '12 at 23:35
  • @Cheery: Birdman's solution is still a Jquery function -- I also find that Birdman's script recenters the image on window resize as opposed to refresh (a minor detail that can easily be modified). But I suppose it just comes down to personal taste. – Hanna Feb 24 '12 at 23:38

2 Answers2

2

Here you go. This will set the image in the exact center of the wrapper.

 win_width = $('#fadewrapper').width();
 win_height = $('#fadewrapper').height();
 border = $('#framewrapper').css('borderWidth');
 $('.fadein img').each(function(){
     $(this).css({
         'left' : (win_width - $(this).width() - border ) / 2,
         'top': (win_height - $(this).height() - border ) / 2
     });
 })

Here's a jsFiddle working example. It reacts based on the window size. Resize the output window to see it react

Birdman
  • 724
  • 5
  • 9
  • This is perfect -- with one exception. One quick follow up: It only centers after resizing. It seems like the script is telling it to pretend that it resized automatically to take care of this but it doesn't seem to work in my implementation. – Hanna Feb 24 '12 at 23:25
  • So I fixed that issue by simply moving the trigger to the bottom of my document. However it loads in at the center without accounting for the image width/height UNTIL it's resized (meaning it loads according to the image top-left) – Hanna Feb 24 '12 at 23:35
  • Any idea why `$(window).trigger('resize');` doesn't seem to fire? – Hanna Feb 27 '12 at 20:13
  • I bet it is being called, but because you're using images, make sure you put this code in $(window).load() and not $(document).ready() or else the images might not be loaded when $(window).trigger('resize') is called. – Birdman Feb 27 '12 at 21:10
  • Ok, I hate to be bothersome, but is there a way for this script to include "border" ? – Hanna Feb 28 '12 at 20:41
  • How or where did you want the border? – Birdman Feb 29 '12 at 05:34
  • I've updated the code to reflect if the image has a border. But note, if you're borders are different sizes (ex. top & bottom are 5px and left & right are 10px) you'll have to explicitly specify that. – Birdman Feb 29 '12 at 19:51
0

This might be worth of trying:

<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
    <IMG id="your_img_id_1" src="your_img_source" height="100%">
    <IMG id="your_img_id_2" src="your_img_source" height="100%">
    <IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>

Add these positioning rules to your fadewrapper-class, and remove all others. Then make changes needed to top and height values, but don't change the height-attribute values in IMG-elements. IDs can be omitted, if you don't need them.

EDIT:

I'm sorry, I didn't notice to check window resize. Code corrected. Width's shoul'd be OK with smaller window sizes now.

I've tested this in IE, FF, Opera and Chrome. In all those browsers images appear just like I want to. But if I've missunderstood what you'd like to have?

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • This doesn't take into account the image's width when centering it, so I run into the same issue. – Hanna Feb 24 '12 at 23:07
  • For sure it does! You propably still have some extra rules for positioning, either in `fadewrapper`-class or in `fade`-class. – Teemu Feb 24 '12 at 23:17
  • Without scripting I don't see how this _could_ work. But I appreciate the help regardless :] – Hanna Feb 24 '12 at 23:27