Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Indexhibit was updated to version 2.1.4 on April 10, 2017.

Create full-browser background img

 

Indexhibit version: Legacy
Thread is not resolved.

Vaska A
UNITED STATES
9 year(s) ago
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
9 year(s) ago
Permalink Post

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

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

Show us!

ilferroud
ITALY
9 year(s) ago
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
9 year(s) ago
Permalink Post

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

michaelj
SWITZERLAND
9 year(s) ago
Permalink Post

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

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

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

;)

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

Hi

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

Best

ckg

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

No. Create one for us now.

;)

michaelj
SWITZERLAND
9 year(s) ago
Permalink Post

bg_img_resize();

i put this in the index.php body?

Vaska A
UNITED STATES
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
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
GREECE
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
Permalink Post

YOU CAN'T EVER STOP!

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

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

;)

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

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

michaelj
SWITZERLAND
9 year(s) ago
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
GREECE
9 year(s) ago
Permalink Post

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

michaelj
SWITZERLAND
9 year(s) ago
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
GREECE
9 year(s) ago
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
9 year(s) ago
Permalink Post

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

OH CRAP!

arsondpi
GREECE
9 year(s) ago
Permalink Post

:DDDDDD

And I was looking for something like:

var h =

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

ckg
UNITED KINGDOM
9 year(s) ago
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
9 year(s) ago
Permalink Post

all caps again

arsondpi
GREECE
9 year(s) ago
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
9 year(s) ago
Permalink Post

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

arsondpi
GREECE
9 year(s) ago
Permalink Post

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

Vaska A
UNITED STATES
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
Permalink Post

Crazy guys trying crazy things here…
Sounds great !

;)

Vaska A
UNITED STATES
9 year(s) ago
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
9 year(s) ago
Permalink Post

what lemathieu said. thup

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

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

Cheers

ckg

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

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

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

Excellent. I’ll have another go at it.

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

Excellent. I’ll have another go at it.

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

Will it work with the random background plugin?

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

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

arsondpi
GREECE
9 year(s) ago
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
GREECE
9 year(s) ago
Permalink Post

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

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

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
9 year(s) ago
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
GREECE
9 year(s) ago
Permalink Post

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

Vaska A
UNITED STATES
9 year(s) ago
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
9 year(s) ago
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
9 year(s) ago
Permalink Post

ckg
UNITED KINGDOM
9 year(s) ago
Permalink Post

Showing 1 - 50 of 515 posts in Forum » Customize » Create full-browser background img
 

This thread has been closed, thank you.