Indexhibit Support

Hello! I just built my web site www.meorme.com
I am struggling with images size. I am quite happt in the way it is now, but I would love to have the images size that fit to the screen! Just one next to each other in the horizzontal scrolling, but of the same size of the screen.
Any idea of how to do it?

Thanks in advance for help!

Sandra

I'm not completely sure what you are asking for. But, full screen images is not exactly a simple thing to achieve (needs plenty of custom javascript to pull it off).

Yes, I guess full screen is what i mean.
I want the pictures to as big as the screen, to avoid to see a big blank white screen under the stripe of pictures on top when I'm on a giant screen, but rather see a giant picture.
Is that difficult to do?

Yes.

it´s a bit tricky but you can do it on horizontal exhibit. I did it on a project using jquery to resize the images to fullscreen. All you have to do is to get the document heigth --> then give each image the document height --> get the new with of each image -->recalculte the new width of the container.

If you are stuck just poste back.

Thanks for info. i'm not sure i understand. What you say is still relative to a specific screen. Ok, i can fit the width of my container to the number of pictures in the horizontal scroll... But what if I open my web form a much bigger screen? They are not gonna change size and won't fit the new screen...
am i wrong?

Hi lorenapomodoro,

got not much time @ moment so I did a quick hack. It´s not perfect but a point to start for you.

It will resize the images to nearly fullscreen in horizontal exhibit format. Works on every screen resolution ;) Make sure to update your jquery.js file to the latest version.

Edited by Vaska: bad link

Oh Thank you so much! I tried it now, and the thing it does is just stuck all pics togethere one after the other one , no gap in between, and if i reduce the size of the window, the don't resize with that.
I see in your file the function to adapt the image size to the height...but not expert of programming. :(

Is is because I didin't update the jquery.js file? I don't know how to do it.. update with wath?
what i did is just copy your file in the plug in...

sorry for my being dumb!

Thanks a lot anyway!

Hi,
you didn´t ask for resize but for fullscreen. ;) If you want the images to resize when you make the window smaller or bigger, just put this function into the dynamic javascript part of your plugin.
It´s exactly the same function but gets fired on window resize...

$(window).resize(function() {
showHeight('window', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );

    }
var    sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +1;

});
$('#img-container').width( sum );    

});

To update your jquery file to the latest Version go to the
JQUERY DOWNLOAD PAGE
then copy the text you see in your browser or download the file. ---> go to your site /ndxz-studio/site/js/jquery.js open the file in your favorite editor and replace the complete content with the content from the jquery site. ---> save the file and upload it to your server.

Yes! I just what i want!

ok so let's see if I've done well (cause still not working)

i updated the jquery file (is that necessary by the way?)

Then I opened the original 'horizontal' plug in and I pasted the lines you wrote above in between (and renamed it as horizontal_dyn)

$DO = new Horizontally;

and

$exhibit['exhibit'] = $DO->createExhibit();
$exhibit['dyn_css'] = $DO->dynamicCSS();

is that the right place?

When I try now to open the page i get this message:
Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /homepages/14/d341846806/htdocs/share/ndxz-studio/site/plugin/exhibit.horizontal_dyn.php on line 15

Then I also tried to add the lines you wrote above in the file downloaded for you (no replacing anything, just adding) but nothing happens.

Please keep helping!

thanks!

Actually I have done!!

ok the pics resize themselves to the window, ...but...
unfortunately they don't keep the proportions!! If i make the window long but very thin images will be distorted!

shees... how to solve this?

Thank you so much!

this is an example if what I'd like to have in my container...

http://www.anrick.com/rightnow/

Sorry for the late answer but sometimes i got to work ;)

If the error still returns by using this file please show us the page with errors :)

Edited by Vaska: bad link

That it is!!! amazing! thank you so much!

the only last little think is... how to leave a space in between the pics?

thanks again!

Hi,
open your style.css and give your images a margin-right this:

.picture img { margin-right:10px;}

...then open the exhibit.horizontal_sized.php and change the parts of the dynamic javascript where the container get´s calculated like this:

sum += $(this).width() +1;
to
sum += $(this).width() +10;

...that should do the trick ;)

Hi! Yes, it works!
But now, if the pics are too many in a row, the last ones go underneath the first ones. is like if there is a maximum in the horizzontal lenght of the window...
How can I tell (in this weird css language) : "keep going with one picture next to each other, no matter how many they are?"

Please have a look:

www.meorme.com in the section laLAlalAllaAla in Random.

Thanks for your help!!!

Ok, you did the margin-right thing but you missed the second step.
@ moment you got a margin-right: 20px.

so you have to do the modifications in your exhibit.horizontal_sized.php:

sum += $(this).width() +1;
to
sum += $(this).width() +20;
also try

sum += $(this).width() +21;

Thank you so much! that is just what I wanted!
Oh, I need some css tutorials! I would love to be able to do it my self!

Now I just need to resize all the pics to a higher resolution, delete and upload them again...since they might be giant on some screens!

Thans again for help and for your time!

:)

This is cool.
Thanks G470 !

Ops, I am being a nightmare? Is just that now is so close to perfection that i try to get it perfect asking more to you G470. Sorry...

It happens than first time you open my web the pics there is always couple of pictures in second row, so i need to scroll down. Then, as soon as I play with the windows size, making it smaller, here the pics align themselves in a single row and resize to the window.

Why is that?

Have a look if is not clear www.meorme.com

:)

No problem ;) you missed one little thing.
This gets fired two times:
sum += $(this).width() +1;
...you edited it one time in the resize function but not in the window load function.

the complete jquery should look like this:

$(document).ready(function() {
showHeight('document', $(document).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );

    }

});

$(window).resize(function() {
showHeight('window', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );

    }
var    sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;

});
$('#img-container').width( sum );    

});

$(window).load(function(){
showHeight('document', $(document).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30);
    }

var    sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;

});
$('#img-container').width( sum );    
    });
    

I have done it,.. still nothing...
please try your self.

do this: before opening my website reduce the window. make it very wide and short. go on my website, click on LalaLAlAllAl and you will see the pictures cropped.
than you modify the size of the window, even just a slight bit, and the pics adjusts themselves to not being cropped...

Anyway, if you can't be bothered, absolutely fine! I am already so thankful for what you have done!

:)

Hey :) played a bit around and made the function more easy and better working I think :)

here is the new version:

$exhibit['dyn_js'] = "

function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );

    }
var    sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;

});
$('#img-container').width( sum );    
}

$(window).resize(function() {

resizeit();
});

$(window).load(function(){
resizeit();
    });
    
";

Hello, i have been away for a while :)

sorry to say that still is not working...
if you have a look atmeorme.com , the section called "around vietnam" is with the last file I downloaded from you (see above) and still the photos are spreading on two lines.
All other sections are with a previous version of the horizontal sized plug in you created, and they are ok, apart for: first time you open the window they are not perfectly sized to it; as soon as you change slightly the dimension of the window they adapt perfectly.
Why?????

I struggled but can't do it... :(

Any other idea G740

thanks a LOT!

Hey, I see the problem. Open the File and remove line:109
this part:
#img-container .picture img { padding-right:20px;}

... or just remove this part from your style.css file:

.picture img {margin-right:20px;}

It works perfectly now!
Thank you so much!

I have an other question now... but if you can't be bothered not worries at all.

In my home page there is a back ground image. Is it possible to have that one sized on the actual size of the window? so to not be cropped if the window is reduced...

On which file should I work?

thanks again :)

i guess i am asking too much!

is perfect as it is!

thanks g470!

Hey lorenapomodoro,

sorry, I completely missed your post.
Just use the Exhibit format on your start page and only upload one picture ;)
It will scale.
If you want to get rid of this vertical scrollbar, just open the file and add this rule to the dynamic css:

body {overflow-y:hidden;}

hi g740! more questions for you!

have a look at my website again, meorme.com. in section Music 1 I added some text. now the width of the window is not big enough and one pictures goes on a second row.

i know how to fix it, i know which line i have to modify!

But my problem now is: when i do 'view/edit' the index.php file in filezilla, what i get is an empty tex file!
I guess is because time ago i modified such index file in OPERA, saved as .php.htm, uploaded on the server and renamed as index.php. It works... but i need it to be back at the text editable version!

any idea of how to do it?

I put another post as well, then i thought to keep going on this one...

any help?

Thank a lot!

I sorted it out myself!

Thaaaanks anyway!

hey G470, is there a way to make your resize trick with the djuve plugin? I changed it following your suggestion but it just dosn't work..
thanks!

Hello G470... Still there?
About the resizing images... Is there the way to tell it that they should resize only if the window is smaller than the actual file? (which means fix a maximum dimentions which would be the size of the file...)
Please, help!
And thanks!

Hey everyone, thanks for sharing your solutions here.

Hoping for some insights on how to get this working. Essentially, I'd like to get the resizing functioning like lorenapomodoro has it working on http://meorme.com/.http://meorme.com/

I've tried the suggestions in this thread, but the last image in the exhibit always breaks to a second line rather than floating left like it should. I'm sure I'm missing a detail somewhere.

Here's the page I'm testing on: http://www.kevinkarn.com/v2/index.php?/direct-mail/http://www.kevinkarn.com/v2/index.php?/direct-mail/

I removed line 109 as G470 suggested which left me without padding between images, but didn't solve the problem.

Any assistance is greatly appreciated.

Hi,

I had the same issue with the last image dropping to a second line. It only seemed to happen if I put the text area (the section text) wider than 250px. I have a lot of text in a section description so this was annoying.

I played around with the code, and re-arranged which bits were controlling the layout in the CSS section at the bottom.

1. Original:
2. #img-container { width:30000em;  margin-top:0px; padding-top:0px; }
3. #img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
4. #img-container #text p { width: " . $this->text_width . "px; }
5. #img-container .picture_holder { float: left; }
6. //#img-container .picture img { padding-right:20px;}
7. #img-container .captioning .title { margin-top: 12px; font-weight: bold; }
8. #img-container .captioning .caption { }

1. Mine:
2. #img-container { width:70000em;  margin-top:0px; padding-top:0px; }
3. #img-container #text { position:absolute; z-index:1; width: " . ($this->text_width + $this->text_padding_right) . "px; }
4. #img-container #text p { width: " . $this->text_width . "px; }
5. #img-container .picture_holder { position:relative; left:" . $this->text_width . "px; float: left; max-height: 100%;}
6. #img-container .picture img { padding-right:0px;}
7. #img-container .captioning .title { margin-top: 12px; font-weight: bold; }
8. #img-container .captioning .caption { width:100px; font-size:0.85em; }

It looks the same as before (though I specified the caption size), just behaves better.

In my version also you don't need to comment out line 109 (110 in mine as I added a carriage return above the CSS section to look cleaner), and you can add padding back in-between the photos.

The text area width is still controlled by the variable on line 56; this variable is called an extra time in my version of the CSS.

I renamed the file; you'll need to name it back to exhibit.horizontal.sized.php if you want to overwrite the original.

Next, I'd like to figure out how to expand the width of the comment section to the width of each photo - so if I have both landscape and portrait orientation photos, the captions will fill the whole width for both. I managed to figure out how to get thumbnails to resize based on the image dimensions (like in the thickbox thumbnail page) for the slidethumbcombo exhibit thumbnails, but haven't been able to get a similar function, eg...

1. $width = getimagesize(DIRNAME . GIMGS . "/$width[media_file]");

...to apply to captions on a per-image basis. The php code structure is a bit beyond me at this point (I'm only a beginning coder).

Edited by Vaska: bad link

I forgot to mention a couple things.

I edited lines 20 and 21 to add more space below the photos. The version posted before had:

1. $('.picture img').css( 'height', h -30 );
2. $('#img-container').css( 'height', h -30 );

which was causing the title and caption to be cut off and cause vertical scrolling, even with just a title and no caption. In my version it's:

1. $('.picture img').css( 'height', h -150 );
2. $('#img-container').css( 'height', h -150 );

which leaves a lot more room than some might want, but is good if you have long captions. In case it isn't obvious, just edit the numbers (-150 in mine) to something else; that's taking the window height and subtracting 150 (pixels I guess) for the image height.

Something cool might be to have the image fill the vertical space, and have a semitransparent box overlaid over the bottom of the image where the caption goes. If I decide to do that (not sure I want it for my own site but might do it for fun and practice) I'll post the code here; that's fairly simple CSS.

The other thing I forgot to mention is that in this line:

1. #img-container #text { position:absolute; z-index:1; width: " . ($this->text_width + $this->text_padding_right) . "px; }

the z-index:1 causes the photos to go on top of the main menu when you scroll right. If you change the code to this:

1.             #img-container { width:70000em;  margin-top:0px; padding-top:0px; }
2.             #img-container #text { position:absolute; z-index:-1; width: " . ($this->text_width + $this->text_padding_right) . "px; }
3.             #img-container #text p { width: " . $this->text_width . "px; }
4.             #img-container .picture_holder { z-index:-1; position:relative; left:" . $this->text_width . "px; float: left; max-height: 100%;}
5.             #img-container .picture img { padding-right:0px;}
6.             #img-container .captioning .title { margin-top: 12px; font-weight: bold; }
7.             #img-container .captioning .caption { width:100px; font-size:0.85em; }

then the menu will stay on top of the photos. If you make your menu semitransparent it looks cool (I did this on my site linked in my previous comment).

The z-index CSS flag controls this; put z-index:-1 to go below the menu, and z-index:1 to go over the menu. You'll need to change it for both the #text and .picture_holder lines.

Is there anyway to lazyload this? Right now when I open a page with a lot of photos it has to wait until they are all loaded to resize.

This is exactly what I was looking for!!

Awesome thread, too. Very helpful.

Would like top make one tiny mod if possible:

The images are a little too big for the page for some reason so they are cropped at the bottom until you scroll down. Is there a way to make the height of the images such that there are always equal borders at the top and bottom of the page and no vertical scrolling?

samevansbutler.com

Edited by Vaska - question is not pertinent to this thread and was posted to multiple threads.

Hi G470,

I've got the my website working well with MultiColumn Timthumb Section and am now trying to implementing the horizontal.sized theme for the individual exhibits. It works well but I have a few customizations that I am trying to do with no success:

1. I would like to remove the animation function...I would like the images to appear resized directly upon reload without seeing them do .
2. I've made a greater margin on top and would like to match that on the bottom
3. Is it possible to have the images "fade"(not animate) in like they do in the multicolumn theme?

My website is http://brandonmhorn.nfshost.com/

Thanks so much for all your help

One final question:

If you look at project 4,

http://brandonmhorn.nfshost.com/project/project-4/

the image is being distorted in a way that the others are not, this is strange. Do you have any idea why?

Thanks!

It works perfectly !

But can we have the same plugin, but vertically ??? :)

... or for CMS 2?

Is this thread work with the plugin.backgrounder.php in /ndxzsite/plugin/ at line 14? v2?

Hello all - This is a great script, is anyone able to update it so it works with Indexhibit 2?

I'm closing this thread because it's very old and unfocused - you can continue this in a new thread.