Indexhibit Support

Impressum

Create full-browser background img

Vaska A / 2009-05-19 16:42:34   

I did this on Friday for a project...going to release it later...very quickly this is what you need to do.

Wrap everything in the body and give the wrapper position absolute, z-index 2, width and height 100%, top and left 0. Maybe width and height can be auto...haven't thought about it yet...

Create a div before the wapper and place it in the body...like...

  1. <div id='the-background'><plug:full_background /></div>

Be sure to style this with the same as the wrapper but with a z-index of 1.

  1. function full_background()
  2. {
  3. // we'll just get it from the page background image
  4. global $rs;
  5. if ($rs['bgimg'] != '') {
  6. // get the dimensions
  7. $size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
  8. return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' />";
  9. }
  10. return;
  11. }

'full_background' is a plugin that will generate the background image...you have many options for this...from the page itself...randomly from a folder of images...from a particular library of images. Just be sure that on the output it includes the true width and height of the image. Have it output just the image html into that div...

Then, you can use this javascript to resize it...

  1. function bg_img_resize() {
  2.     var w = $(window).width();
  3.     var h = $(window).height();
  4.     var iw = $('#the-background img').attr('width');
  5.     var ih = $('#the-background img').attr('height');
  6.     var rw = iw / ih;
  7.     var rh = ih / iw;
  8.     var sc = h * rw;
  9.     if (sc >= w) {
  10.         nh = h;
  11.         nw = sc;
  12.     } else {
  13.         sc = w * rh;
  14.         nh = sc;
  15.         nw = w;
  16.     }
  17.     $('#the-background img').css({height: nh, width: nw});
  18. }

This is using Jquery - in your document ready rules add this function as well:

  1. bg_img_resize();

You might add this function to a window resize rule as well...

And that's it!

Vaska A / 2009-05-19 17:44:31   

Show us!

Vaska A / 2009-05-19 17:52:32   

Make a plugin...read the fast plugin tutorial...

michaelj / 2009-05-19 20:32:51   

Hey.
Thanks a lot. I need some time as well,
but gonna try it!!

Vaska A / 2009-05-19 20:48:42   

DO IT NOW!!!!!!!!!

;)

ckg / 2009-05-19 21:19:49   

Hi

This sounds great. Is there a working example we can look at?

Best

ckg

Vaska A / 2009-05-19 21:23:24   

No. Create one for us now.

;)

michaelj / 2009-05-19 21:29:58   

bg_img_resize();

i put this in the index.php body?

Vaska A / 2009-05-19 21:33:55   

You would put it with the onready stuff...like this...

  1. $(document).ready(function()
  2. {
  3. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  4.     bg_img_resize();
  5. });
ckg / 2009-05-19 22:00:25   

Cool.

I’ve got the onready bit and I think I’ve written the plug-in. Could you explain the first part (the wrapper) a little more please.

Thanks

ckg

How are you getting on michaelj?

Vaska A / 2009-05-19 22:16:59   

Take everything between the body tags...

  1. <body> ... everything ... </body>

Then, add tags like this...

  1. <body>
  2. <div id='the-background'><plug:bg_img_resize /></div>
  3. <div id='wrapper'>
  4. ... everything else ...
  5. </div>
  6. </body>

In the style.css file add...

  1. #the-background {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100%;
  7. z-index: 2;
  8. overflow: hidden;
  9. }
  10. #wrapper {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. z-index: 1;
  17. }
michaelj / 2009-05-19 22:50:56   

unfourtunately, i can not show anything, since i can only test it live, right now
and since it's not working, i have to put it back to normal, but this is what i did, and
there is just nothing, not even an error:
sorry, but most probably i do silly mistakes

  1. <strong>1. after the body open tag in index.php </strong>
  2. <ol>
  3. <li><div id='the-background'><plug:full_background /></div></li>
  4. <li><div id='wrapper'></li>
  5. bodystuff
  1. <li></div></li>
  2. </ol>

2. In the style.css file:

  1. #wrapper {z-index: 2; width: 100%; height: 100%; top: 0; left:0;}

#the-background {z-index: 1; width: 100%; height: 100%; top: 0; left:0;}

  1. <strong>3. create plugin.full_background.php (probably wrong:) </strong>
  2. <ol>
  3. <li><? phpli
  4. lifunction full_backgroundli
  5. lili
  6. li// we'll just get it from the page background image</li>
  7. liglobal $rsli
  8. liif $rs'bgimg' != '' li
  9. li// get the dimensions</li>
  10. li$size  getimagesizeDIRNAME  '/files/gimgs/'  $imgli
  11. lireturn "<img src='"  BASEURL  GIMGS  /$rsbgimg' width='$size0' height='$size1' />li
  12. lili
  13. lireturnli
  14. lilili?></li>
  15. </ol>

4. The bg_img_resize() javascript function in the header of index.php

arsondpi / 2009-05-19 22:51:23   

C*@p - σκ@τ@ - He11!

Take 2 of this tommorow.

Edit: Oh wait you're already doing it! I wanna participate some more...

michaelj / 2009-05-19 22:52:24   

sorry, you can delete my previous entry, there was a mistake. thanks.
i didn't see what you wrote!

Vaska A / 2009-05-19 22:57:50   

YOU CAN'T EVER STOP!

Vaska A / 2009-05-19 22:58:10   

Damn, I'm feeling evil posting in all caps like that.

;)

Vaska A / 2009-05-19 22:59:34   

Arson...for some reason you aren't getting the dimensions of the image...

michaelj / 2009-05-19 23:01:33   

sorry, i am confused, that you give in the last example, the wrapper z-index 1 and the-background you give z-index 2.
At the beginning you say the opposite...

arsondpi / 2009-05-19 23:10:17   

Michaelj check this and tell me if you can spot what I'm doing wrong...

michaelj / 2009-05-19 23:18:22   

hey arsondpi
i don't know anything about php, but:
1. in the CSS there is the-background missing (check the entry of Vaska, further up)
2. the plugin:
i think you don't need the dynamicCSS and dynamicJS part... but i am not sure
3. the javascript function is from jquery right? so entering:
bg_img_resize();
like you did, is enough i guess...?

more i don't know, what is still missing Vaska?

arsondpi / 2009-05-19 23:25:27   

the the-background is css but I've got it set as dynamic css, so it's activated when the pugin is activated...

Like Vaska said I get a

  1. h is not defined
  2. var sc = h * rw;

in firebug... I'm scanning my document but I can't track down what I'm doing wrong...

Edit: Let's hope it's not some stupid syntax error like the ones I'm usually doing...

Vaska A / 2009-05-19 23:35:59   

oh crap...we need new jquery for this!

OH CRAP!

arsondpi / 2009-05-19 23:39:33   

:DDDDDD

And I was looking for something like:

var h =

in the js cause it's not set up...

ckg / 2009-05-19 23:40:24   

I’m getting this error with the plugin (see below). Is this something to do with my host’s version of php??

Parse error: syntax error, unexpected T_VAR in...

/ndxz-studio/site/plugin/plugin.full_background.php on line 13

Below are lines 12,13 & 14. Let me know what you think.

  1. function bg_img_resize() {
  2. ¬†¬†¬†¬†var win_width = $(window).width();
  3. ¬†¬†¬†¬†var win_height = $(window).height();
michaelj / 2009-05-19 23:40:50   

all caps again

arsondpi / 2009-05-19 23:48:01   

Yes Vaska... michaelj is right: all caps again...

Please read the forum rules... LOLOLOL

_____
I downloaded the latest version of jquery and trying it out with mamp but still doesn't work... What's my error...

Vaska A / 2009-05-19 23:54:29   

TOO BAD FOR YOU GUYS I CAN EDIT THE SYSTEM FILES AT MY LEISURE!

arsondpi / 2009-05-19 23:56:33   

ok - michaelj, Vaska is now picking on us.... We got to sort out a solution.
This is embarassing.

Vaska A / 2009-05-19 23:59:04   

Ok...all I did was make it possible to use the small tag. For admin and moderators. ;)

Because I was stupid...should be...

  1. var w = $(window).width();
  2. var h = $(window).height();
Vaska A / 2009-05-20 00:05:29   

I can see you updated but for whatever reason it's still not outputting the width and height of the image (via PHP)...which is a bit strange.

Oh geez...how in the hell did I mess things up so much? Should be this...

  1. $size = getimagesize(DIRNAME . '/files/gimgs/' . $rs['bgimg']);

Now you should get the dimensions...take that style off of the image too...

Vaska A / 2009-05-20 00:10:30   

Sorry I had those errors guys...I'll come back tomorrow and help you sort it out if you don't get it tonight.

But now I should sleep. Night.

lemathieu A / 2009-05-20 12:06:06   

Crazy guys trying crazy things here…
Sounds great !

;)

Vaska A / 2009-05-20 12:14:57   

Yeah...and I keep finding code that was wrong...I edited a bunch of this up on the fly because it comes from new Indexhibit and I was downgrading the code...these lines were corrected...it's correct in my first post above...

  1. $size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
  2. return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' />";
psbpsb / 2009-05-20 13:29:16   

what lemathieu said. thup

ckg / 2009-05-21 21:53:28   

Has anyone managed to work this yet? Can they post an example please?

Cheers

ckg

Vaska A / 2009-05-21 21:56:25   

I've fixed all the bugs if you read my posts.

ckg / 2009-05-21 22:03:59   

Excellent. I’ll have another go at it.

ckg / 2009-05-21 22:04:33   

Excellent. I’ll have another go at it.

ckg / 2009-05-21 22:08:12   

Will it work with the random background plugin?

Vaska A / 2009-05-21 22:11:37   

Nope. But it could if you customize things...

arsondpi / 2009-05-22 06:22:09   

I tried it but I obviously doing something wrong...

1) Is this supposed to change size dynamically?
2) Why this line:

  1. return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' />";

It returns the image in my content area...

arsondpi / 2009-05-22 06:25:18   

The plugin
--------------------------

  1. <?php if defined'SITE' exit'No direct script access allowed'
  2. /**
  3. * Backgrounded
  4. *
  5. * Exhbition format
  6. * 
  7. * @version 1.0
  8. * @author Vaska 
  9. */
  10. // defaults from the general libary - be sure these are installed
  11. $exhibit'dyn_css'  dynamicCSS
  12. $exhibit'dyn_js'  dynamicJS
  13. $exhibit'exhibit'  full_background
  14. function full_background
  15. // we'll just get it from the page background image
  16. global $rs
  17. if $rs'bgimg' != '' 
  18. // get the dimensions
  19. $size  getimagesizeDIRNAME  '/files/'  $rs'bgimg'
  20. return "<img src='"  BASEURL  /files/$rsbgimg' width='$size0' height='$size1' />
  21. return
  22. function dynamicCSS
  23. ¬†¬†¬†¬†return "#the-background { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; }"
  24. function dynamicJS
  25. ¬†¬†¬†¬†global $rs
  26. ¬†¬†¬†¬†return "function bg_img_resize() {
  27. ¬†¬†¬†¬†    var w = $(window).width();
  28. ¬†¬†¬†¬†    var h = $(window).height();
  29. ¬†¬†¬†¬†    var iw = $('#the-background img').attr('width');
  30. ¬†¬†¬†¬†    var ih = $('#the-background img').attr('height');
  31. ¬†¬†¬†¬†    var rw = iw / ih;
  32. ¬†¬†¬†¬†    var rh = ih / iw;
  33. ¬†¬†¬†¬†    var sc = h * rw;
  34. ¬†¬†¬†¬†    if (sc >= w) {
  35. ¬†¬†¬†¬†        nh = h;
  36. ¬†¬†¬†¬†        nw = sc;
  37. ¬†¬†¬†¬†    } else {
  38. ¬†¬†¬†¬†        sc = w * rh;
  39. ¬†¬†¬†¬†        nh = sc;
  40. ¬†¬†¬†¬†        nw = w;
  41. ¬†¬†¬†¬†    }
  42. ¬†¬†¬†¬†    $('#the-background img').css({height: nh, width: nw});
  43.     }"
  44. ?>

The css
--------------------------

  1. #wrapper {
  2. ¬†¬†¬†¬†position: absolute;
  3.     z-index:2;
  4. ¬†¬†¬†¬†width: 100%;
  5.     height:100%;
  6.     top:0;<
  7.     left:0;
  8. }

Part of the html in index.php
--------------------------

  1. ....
  2. <script type='text/javascript'>
  3. path = '<%baseurl%>/files/gimgs/';
  4. $(document).ready(function()
  5. {
  6. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  7.     bg_img_resize();
  8. });
  9. </script>
  10. <plug:front_dyn_js />
  11. <plug:backgrounder color='<%color%>', img='<%bgimg%>', tile='<%tiling%>' />
  12. </head>
  13. <body class='section-<%section_id%>'>
  14. <div id='the-background'><plug:full_background /></div>
  15. <div id="wrapper">
  16. <div id='menu'>
  17. <div class='container'>
  18. <%obj_itop%>
  19. <plug:front_index />
  20. <%obj_ibot%>
  21. <!-- you must provide a link to Indexhibit on your site someplace - thank you -->
  22. <ul>
  23. <li>Built with <a href='http://www.indexhibit.org/'>Indexhibit</a></li>
  24. </ul>
  25. </div>    
  26. </div>    
  27. <div id='content'>
  28. <div class='container'>
  29. <!-- text and image -->
  30. <plug:front_exhibit />
  31. <!-- end text and image -->
  32. </div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>
Vaska A / 2009-05-22 06:42:58   

It's working...I don't see a css rule for the background...

  1. #the-background {
  2.     position: absolute;
  3.     z-index:1;
  4.     width: 100%;
  5.     height:100%;
  6.     top:0;
  7.     left:0;
  8. }

That helps?

arsondpi / 2009-05-22 07:53:10   

...I did include this as a dynamic css in my plugin...
why doesn't it return #the-background...

Vaska A / 2009-05-22 08:00:35   

Oh, I can't remember...do the plugins return css rules? I can't remember if they do anymore...I thought this was one of the big changes I had made for the new version.

Maybe you are living in the future?

ckg / 2009-05-22 19:49:08   

Can anyone help me with this please? I keep getting Parse errors with this plugin:

Parse error: syntax error, unexpected T_STRING, expecting '(' in
resize/ndxz-studio/site/plugin/plugin.full_background.php on line 1

This is the plug in below. Any ideas?

ckg / 2009-05-23 13:52:12   

ckg / 2009-05-23 13:53:45   

Vaska A / 2009-05-23 14:16:55   

It's the weekend...give us a break. You might consider reading the tutorial about how to create a plugin as well...

And no website to look at. Please read the forum rules...

Any reason you are posting blank?

sylvainman / 2009-05-31 03:23:21   

Hi guys,
Any news about this plugin ?

This thread has been closed, thank you.