Forums » Customize

Create full-browser background img

Vaska A
UNITED STATES
2009-05-19 16:42:34
Permalink Post
 

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!

ilferroud
ITALY
2009-05-19 17:31:40
Permalink Post
 

let me try it right now!
it's a lovely thing.

Vaska A
UNITED STATES
2009-05-19 17:44:31
Permalink Post
 

Show us!

ilferroud
ITALY
2009-05-19 17:47:47
Permalink Post
 

ehm let me study a bit first
I'm so confused :)
-
where should we use the second part of the code?
(function full_background()...)

Vaska A
UNITED STATES
2009-05-19 17:52:32
Permalink Post
 

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

michaelj
SWITZERLAND
2009-05-19 20:32:51
Permalink Post
 

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

Vaska A
UNITED STATES
2009-05-19 20:48:42
Permalink Post
 

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

;)

ckg
UNITED KINGDOM
2009-05-19 21:19:49
Permalink Post
 

Hi

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

Best

ckg

Vaska A
UNITED STATES
2009-05-19 21:23:24
Permalink Post
 

No. Create one for us now.

;)

michaelj
SWITZERLAND
2009-05-19 21:29:58
Permalink Post
 

bg_img_resize();

i put this in the index.php body?

Vaska A
UNITED STATES
2009-05-19 21:33:55
Permalink Post
 

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
UNITED KINGDOM
2009-05-19 22:00:25
Permalink Post
 

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
UNITED STATES
2009-05-19 22:16:59
Permalink Post
 

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
SWITZERLAND
2009-05-19 22:50:56
Permalink Post
 

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 A
GREECE
2009-05-19 22:51:23
Permalink Post
 

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

Take 2 of this tommorow.

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

michaelj
SWITZERLAND
2009-05-19 22:52:24
Permalink Post
 

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

Vaska A
UNITED STATES
2009-05-19 22:57:50
Permalink Post
 

YOU CAN'T EVER STOP!

Vaska A
UNITED STATES
2009-05-19 22:58:10
Permalink Post
 

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

;)

Vaska A
UNITED STATES
2009-05-19 22:59:34
Permalink Post
 

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

michaelj
SWITZERLAND
2009-05-19 23:01:33
Permalink Post
 

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 A
GREECE
2009-05-19 23:10:17
Permalink Post
 

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

michaelj
SWITZERLAND
2009-05-19 23:18:22
Permalink Post
 

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 A
GREECE
2009-05-19 23:25:27
Permalink Post
 

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
UNITED STATES
2009-05-19 23:35:59
Permalink Post
 

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

OH CRAP!

arsondpi A
GREECE
2009-05-19 23:39:33
Permalink Post
 

:DDDDDD

And I was looking for something like:

var h =

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

ckg
UNITED KINGDOM
2009-05-19 23:40:24
Permalink Post
 

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
SWITZERLAND
2009-05-19 23:40:50
Permalink Post
 

all caps again

arsondpi A
GREECE
2009-05-19 23:48:01
Permalink Post
 

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
UNITED STATES
2009-05-19 23:54:29
Permalink Post
 

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

arsondpi A
GREECE
2009-05-19 23:56:33
Permalink Post
 

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

Vaska A
UNITED STATES
2009-05-19 23:59:04
Permalink Post
 

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
UNITED STATES
2009-05-20 00:05:29
Permalink Post
 

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
UNITED STATES
2009-05-20 00:10:30
Permalink Post
 

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
FRANCE
2009-05-20 12:06:06
Permalink Post
 

Crazy guys trying crazy things here…
Sounds great !

;)

Vaska A
UNITED STATES
2009-05-20 12:14:57
Permalink Post
 

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
UNITED KINGDOM
2009-05-20 13:29:16
Permalink Post
 

what lemathieu said. thup

ckg
UNITED KINGDOM
2009-05-21 21:53:28
Permalink Post
 

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

Cheers

ckg

Vaska A
UNITED STATES
2009-05-21 21:56:25
Permalink Post
 

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

ckg
UNITED KINGDOM
2009-05-21 22:03:59
Permalink Post
 

Excellent. I’ll have another go at it.

ckg
UNITED KINGDOM
2009-05-21 22:04:33
Permalink Post
 

Excellent. I’ll have another go at it.

ckg
UNITED KINGDOM
2009-05-21 22:08:12
Permalink Post
 

Will it work with the random background plugin?

Vaska A
UNITED STATES
2009-05-21 22:11:37
Permalink Post
 

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

arsondpi A
GREECE
2009-05-22 06:22:09
Permalink Post
 

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 A
GREECE
2009-05-22 06:25:18
Permalink Post
 

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
UNITED STATES
2009-05-22 06:42:58
Permalink Post
 

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 A
GREECE
2009-05-22 07:53:10
Permalink Post
 

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

Vaska A
UNITED STATES
2009-05-22 08:00:35
Permalink Post
 

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
UNITED KINGDOM
2009-05-22 19:49:08
Permalink Post
 

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
UNITED KINGDOM
2009-05-23 13:52:12
Permalink Post
 

ckg
UNITED KINGDOM
2009-05-23 13:53:45
Permalink Post
 

Showing 1 - 50 of 509 posts in Forum > Customize > Create full-browser background img