Indexhibit^TM
Index + Exhibit

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?

Hi guys,
Any news about this plugin ?

It's Sunday.
We are all recovering from last nights moshpit.
You can see Pau and Eloisa on 0:14 waving the Spanish flag... the rest of us are in there somewhere. :-P

The plugin is easy to make... my last post was not absolutely correct but should give you a headstart.

I know it is the week-end, but nobody wrote anything for one week, I don't understand why I should wait for monday to ask a question.

I tried your solution but I have the same error as ckg.

Of course, people ask questions on weekends...but they need to realize that we aren't here nearly as much. If you go back and look at their blank posts...it's pretty clear what I'm getting at (specifically to that person).

This is not a fully supported plugin...if you can make it work that's great...but I can only do so much. I've made it work...and some others have made it work...

If you read the tutorial about creating plugins it could be obvious what is missing. Everything you need is there...especially if you read all of my posts.

I did not post the full code for a plugin...somebody else did...and something is clearly wrong within their post.

I know it is week-end and don't wait for answers as soon as I post. I completely agree with you Vaska.

I have corrected all (I hope so) arsondpi mistakes thanks to first Vaska's post.
I followed every add-ons and read entirely the "how to make a plugin".
But my background image is not resized.
Here is a link if people wants or have time to help.
Thank you

naaaaaaaaah...i wasn't imply that you were posting that way. your comment about waiting a week though...we just never got back around to the thread. it helps alot when people reply too...

i don't see where you have added the js code for this to your template - i believe it's missing. This...needs be in a js file and called up...

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 part of code is my plugin.fullbackground.php ass seen on arsondpi example :

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

So if I understand well, I should create a new JS file for it ?

Either way that works. It's obviously not being accessed by the page right now.

1. Ok I created a file bg_img_resize.js and put it in my JS folder.
2. In my index.php i added
3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/bg_img_resize.js'></script>
4. But I don't see any difference.
5. I'm lost.

It's kind of hard to help when you turn it off...

Oups...
I've created a special page to test it here.

the plugin comes in three parts.
-The php part (‚Üí exhibit.fullbackground.php, which needs to be activated from the dropdown menu while editing an exhibit)
-The js part (which can be included in the index.php or in the exhibit.fullbackground.php)
-The css part (which can be included in the style.css or in the exhibit.fullbackground.php - there's other plugins that return css rules as well)

link
I still don't understand a couple of things...

1) I get an identical img tag on top of the background image. As far as I understand this has to do with calling the plugin from within an exhibit (from the drop down menu) and thus getting the same return from the plugin

2) I have typed some text in the text area which doesn't seem to show up. It's as if the img tag overwrites everything.

3) As far as I understand the plugin does not change image size "dynamically" (while changing the size of the browser window). Am I right?

It doesn't need to be an exhibition format plugin...you are getting this confused with the one leslie tried to make (that did not even work).

1. See above for the reason...
2. Well...
3. Yes, but that's very easy to implement if you get it working...

I can't show the working mockup yet...later this week I can.

Aha... so I save the plugin as plugin.full_background.php and place it in the plugins folder and call it from within my text area as <plugin:full_background /> ? That's why you have to include the js in the index.html...

Now i just need to figure out the right syntax (I guess...) lol

I included the js in the index.html and the css in style.css

this is the code for plugin.full_background.php. I called the plugin from within my text area as <plugin:full_background /> .The code:

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Full Size Background
*
* @version 1.0
* @author Vaska
*/

// defaults from the general libary - be sure these are installed

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

?>

Ok got it.. I confused exhibition formats with plugins...
------------------
[1]
Create a plugin called plugin.full_background.php

This is the code for it... Upload it in your plugin folder:

<?php if (!defined('SITE')) exit('No direct script access allowed');
/**
* Backgrounded
*
* Full Size Backgrounded
*
* @version 1.0
* @author Vaska
*/
function full_background() {
    // we'll just get it from the page background image
    global $rs;
        if ($rs['bgimg'] != '') {
        // get the dimensions
        $size = getimagesize(DIRNAME . '/files/' . $rs['bgimg']);
        return "<img src='" . BASEURL . "/files/$rs[bgimg]' width='$size[0]' height='$size[1]' alt=''/>";
        }
    return;
}
?>

------------------
[2]

Include this js in your index.html or call it in your index.html (via <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script>)
.
This resizes your image according to the window size...

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

------------------
[3]

Delete this line just before the </head> tag

1. <plug:backgrounder color='<%color%>', img='<%bgimg%>', tile='<%tiling%>' />

And then insert this just after the <body class='section-<%section_id%>'> in your index.html.

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

This calls the plugin (makes the img tag into a background via js)

Exactly after the code you just inserted wrap everything else in an div called wrapper...

1. <div id="wrapper">
2. <div id='menu'>
3. <div class='container'>
4. <%obj_itop%>
5. <plug:front_index />
6. <%obj_ibot%>
7. <!-- you must provide a link to Indexhibit on your site someplace - thank you -->
8. <ul>
9. <li>Built with <a href='http://www.indexhibit.org/'>Indexhibit</a></li>
10. </ul>
11. </div>    
12. </div>    
13. <div id='content'>
14. <div class='container'>
15. <!-- text and image -->
16. <plug:front_exhibit />
17. <!-- end text and image -->
18. </div>
19. </div>
20. </div>
21. </body>
22. </html>

------------------
[4]

Include this in your style.css

1. #the-background {
2.     position: absolute;
3.     z-index:1;
4.     width: 100%;
5.     height:100%;
6.     top:0;
7.     left:0;
8. }
9. #wrapper { 
10. ¬†¬†¬†¬†position: absolute;
11. ¬†¬†¬†¬†z-index: 2;
12. ¬†¬†¬†¬†width: 100%;
13. ¬†¬†¬†¬†height: 100%;
14. ¬†¬†¬†¬†top: 0;
15.     left:0;
16. }

...

Upload a background image in one of your exhibits. A small one preferably so you understand how it works. Then shrink/enlarge the window. Yoohoo! The image gets resized!

one question though: do we still need the backgrounder plugin (the plugin that inserts backgrounds normally - it can be found just before the </head> tag...)
It appears that the background image loads up twice - once for the backgrounder plugin and once again for the full_background plugin....

Yeah, I think that needs to go away...or maybe worked into this new plugin.

Bug!

Links don't work and text can't be highlighted when raw html code is inserted. Check my info page...

I also think that #the-background should have a position: fixed otherwise the background scrolls down when the page is to long...

Is there an example where one can see how it's actually supposed to look like?

I reckon that the image is scalable so that it resizes together with the browser window.
The examples posted here doesn't really work like that or did I miss something?

Works fine for me over here.

If you want to see it in action...go into the demo Exhibits > Settings and turn on the 'background' theme. Then go to the link above and you will see it - assuming nobody deletes the background image from that particular exhibit.

This also has the code for window resizing as well.

I altered no code from what I had posted in this thread to make it work...

Code corrected and adjusted in my previous thread.

It now works in my link as well...
Only thing is that depending on the content the background image scrolls along with content. As I said this can be fixed with:

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

but I don't now what it does to IE browsers... Maybe someone can shed some light...

Ah...you know...the three times that I have done this I never needed the scroll because it was intended that the photo would be viewed at least in part...or...the content was coming up in a Shadowbox style window in the center of the page.

I'm not sure this works in a scrolling situation at all...it's a matter of design I feel. Just my opinion though...

position fixed? attachment? IE just makes me so mad...maybe IE7 and above can deal with fixed?

So...just use javascript...of course you might want to make this available only to the IE browsers but I'm not going to bother with it right now...

Repositioning for IE's...

1. $(window).resize(function(){ 
2.     bg_img_resize(); 
3.     $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
4. });

1. $(window).scroll(function(){ 
2.     bg_img_resize(); 
3.     $('#the-background').css({ 'top' : 0, 'left' : 0 }); 
4. });

but I'm not going to bother with it right now...

me either... I'm cooking pasta and I'm hungry. It's obvious where that code snippet should be placed... (or not?)

It works for me ! Here.
Do you think the background image could be chosen randomly ?

Sure looks nice...give me a bit...I'll make a plugin for that too...

I'll do this later...the forum stuff is being weird today and taking out a ton of code on me...oi vey...

;)

Sure looks nice...give me a bit...

Sorry Vaska

I posted a couple of blanks a while back. I was actually trying to post some code to, hopefully, illustrate my problem. I pasted the code, highlighted it, the selected Code from the Insert Menu but it came out blank when I posted it - same thing when I tried the second time.

No offence intended.

I’ve been on holiday but I’m going to give this another go tonight.

Appologies again.

ckg

Still don't see a website...pretty much impossible for us to help.

sylvainman, that link looks really nice, what plugin have you used to change the images? that's not the slideshow plugin? Great site man. Also how do you get the coloured bar below the image when you mouse over?

cheers,
dan

@vaska you can see the plugin working here (on the homepage only).

@schlomper ok it is an old link. the plugin you saw is Iwakami and everything is explained here.

My site is www.taylorhain.com

Nevermind on my question. I decided to go in a different direction. Thanks!

http://www.be-plus.co.uk/test/

I”m trying to get this (again) but I’m totally stuck. Can anyone help?

Thanks

Hey Vaska. I was just wondering if you've made any progress with getting this to work with the random image plugin. Or if you know approximately when that will come into fruition.

THX!

I can not seem to figure out what is wrong with this on my site. I have done the plugin, the js, the css, called the plugin and js from my index, and uploaded the background image. I have looked through all the code on this post, feel like I have checked everything over and over again, but I just can't get it to work. I feel like something might be wrong/missing in my js because the image is there it is just not resizing. If someone could take a look at the site and lead me in the right direction I would appreciate it. Thanks. http://ryanflynnphoto.com

oops... This may need jquery 1.3 - note that this may corrupt compatibility with thickbox.

Alternatively you can wait a while for the new version...

Thanks arsondpi,
I just tried 1.3 and although it did not make the full background, you were right about it messing up thickbox. If 1.3 made it work, I think I'm at the point where i would use it and just not use thickbox.
Thanks for your time and the help!

I think Vaska’s only using jQuery 1.1 in his example. I was getting the same as ayteale - everything seems to be working except it’s not resizing.

I’ve been trying to get this to work for ages. Any other ideas would be very welcome - Then I can get on to making it work as a random background! ;)

That would be awesome, ckg. I haven't tried personally, because I've been holding out for the background images, but it seems kind of daunting; good luck!

HI Vaska

Could you have a look at this please and tell me if you see anything wrong? It’s driving me mad.

Thanks

http://www.be-plus.co.uk/test

you will need

1) move the full_background.js after jquery.js

1. <script type='text/javascript' src='http://www.be-plus.co.uk/test/ndxz-studio/site/js/jquery.js'></script>
2. <script type='text/javascript' src='http://www.be-plus.co.uk/test/ndxz-studio/site/js/cookie.js'></script>
3. <script type='text/javascript' src='http://www.be-plus.co.uk/test/ndxz-studio/site/js/grow.vaska.js'></script>
4. <script type='text/javascript' src='http://www.be-plus.co.uk/test/ndxz-studio/site/js/full_background.js'></script>

2) exclude the script tags from the script when you call it from you index.php

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

3) update to jquery 1.3

It works!!!

Thank you so much arsondpi. I love you.

Yup! That worked for me too arsondpi, thanks a bunch. I also needed to have the background css positioned to fixed also.

well - that's a matter of preference... I've posted that further up...
But when adding position: fixed; it would be good to add those 4 lines of js for ie support that Vaska posted just after my post...

p.s. Success in relationships through indexhibit! :-D

Ah crap. My buddy just tested it in ie and said its acting up. This is something that I am totally dumb with, so may i ask for some precise help?

1. I add all those 8 lines of code (not 4) correct?
2. exactly where to i add them?
3. do I need to add whatever code so it only does that in IE?

Sorry for the lame questions, but I do appreciate it!

...correct - get these 8 lines in the end of your full_background.js
and also change to position: fixed; for #the-background...

You can check it in my contact page as I mentioned before.
IE7 should understand position fixed...