BackBox Image Viewer **Updated 25/06/11**

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 1:45 am

***Update 23/06/11***
Extension is now updated and avaiable to download from the extension manager.

***Updated 05/07/10***
Meets W3C Standards
Built with Extension Builder 2.0.2

***Update 12/05/10***
Update to fix the background opacity when using the extension with many images in vertical it would only show half the page with opacity.
New download available
Description: BackBox is a new image gallery script which displays your pictures in a smooth and easy way. It works on the same principle as "Lightbox.js", though it supports the ability to dismiss the enlarged image when the user clicks the browser "back" button, instead of the default action of going to the previous page. The interface also adds explicit "pervious" and "next" links.

***Update 5/07/10***
Backbox has now been updated to work with the New jQuery objects in WB7.
It has been tested and works with the following:
RollOver Image
RollOver Text
Slide Show
Photo Gallery with prettyPhoto and Fancybox
jQuery Tabs
jQuery Dialog
jQuery Accordian
jQuery Button
jQuery DatePicker
jQuery Auto Complete
Navigationbar....it should be compatible with other extensions that use the jQuery to load....please note I cannot guarantee that it will be compatible with "ALL" other jQuery extensions as it is almost impossible for me to check with everything that uses jQuery but if you find anything I will do my best to "Fix" if possible to "Fix" Please note that this version is for WB7
I have not tried it in WB6.5 but it should still work and allow users to be able to use jQuery and extensions that use the prototype.js as "Backbox" does...

Script Site: http://www.javascriptkit.com/script/script2/backbox/
Developer: Rupert Olson

A BIG thanks to Eddy.....and that nice cool beer lol

Download WB7 via extension manager

zinc · Post by **zinc** » Fri Jun 12, 2009 7:18 am

BF; Very useful, I have a project that need just a thing like this. Welldone to you and Star57, Great work.I love it.

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 11:25 am

Thx sneil hope it suits what you need it for as always any issues I will try to resolve asap...

morgan · Post by **morgan** » Fri Jun 12, 2009 2:35 pm

Hi BaconFries, I am really please you have had time to look at this great image viewer, I am sure Star57 will be pleased with the end result.

I have had a couple of quirky problems, when i change the WB6 Doc type to XHTML 1.0 the whole page is out of shape. In HTML 4.01 all is ok as long your explorer page is the same size as the web page, if you drag the explorer page to make it bigger the spacing goes wrong.

http://www.schryver-restoration.com/tes ... age10.html#
http://www.schryver-restoration.com/tes ... age10.html#

I have checked the above links in FF with simular results plus the text has no white background. It also seems to have made the conveyer at the top go wrong.

http://www.schryver-restoration.com

Maybe I am doing something wrong, I just hope you can help.

Thanks Dan

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 4:39 pm

Hi morgan ok I see your problem and will look into it I am aslo going to contact the original author regarding some issues I can see as well.Ok I need to ask this question did you upload the blank.html that comes with the extension to your server? this is needed as part of how the script works.... I will get back to you asap

morgan · Post by **morgan** » Fri Jun 12, 2009 6:04 pm

BaconFries I did upload the blank, any question please ask.

Dan

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 6:04 pm

Hi morgan ok I have been looking at your problem and believe I have found your what is wrong...when you insert a image to be used as a thum it needs to be a true thumb image by this I mean if you use the thumb height/width in extension and set to 120x120 then the image you use needs to be 120x120 otherwise the image gets displayed wrong this is only seems happens if you use the doctype XHTML 1.0 Transitional but works ok with doctype DTD HTML 4.01 Transitional... I cant explain why this happens but will look into it ....I think it may have to do with the javascript. About the FireFox issue it may be down to a conflict with the conveyer script and the backbox as they are both JS again I will test this and let you know...

morgan · Post by **morgan** » Fri Jun 12, 2009 6:32 pm

ok I will change the thum size, what doc type do you want me to use.

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 6:43 pm

I have tried it in both with all thumbs the same size ie 120x120... and it keeps all thumbs same size. Regarding the conveyer issue this is a conflict in FF with the javascripts the solution for this is to place the conveyer in a iframe and it works alongside the backbox tried and tested this...the text overspill I am still looking at I am going through all the posts in authors blog to see if there something similar...again I will post findings asap....

morgan · Post by **morgan** » Fri Jun 12, 2009 6:57 pm

ok here are two links
http://www.schryver-restoration.com/tes ... age10.html#
http://www.schryver-restoration.com/tes ... age10.html#
I have used 120 x120 thums and removed the conveyer on link 2, I still seem to have problems with position and the XHTML text has no background

When I saw this extension I thought it was perfect for this website, do you think you can sort it.

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 9:51 pm

Hi morgan I am trying to get it fixed asap please note that I do this freely at my own time....so please try and be patient I am reading through the authors blog to see if there is any fix the postings go back to 2007 and the last was aug 2008 so the author may no longer support this I am trying to contact him but I cant do much till I get a reply...

morgan · Post by **morgan** » Fri Jun 12, 2009 10:08 pm

Sorry dont feel pressured by me I am really greatful for the help. As a complete novice I dont bring anything to this forum other than problems and understand I must be patient. I dont know where you are in the world but its late here and I must get some ZZZZ. Good luck with the fix.

BaconFries · Post by **BaconFries** » Fri Jun 12, 2009 10:15 pm

Nah dont worry about it morgan it just me.... got to much on at moment take a look at this try in in FF
http://justtesting123.comuf.com/bbdemo/# it is just using the standard doctype DTD HTML 4.01 Transitional

zinc · Post by **zinc** » Sat Jun 13, 2009 6:30 am

BF,

Is it possible to add ALT text to the image that the user has to click on to preview the image?

morgan · Post by **morgan** » Sat Jun 13, 2009 8:55 am

BaconFries your nearly there,

FF Looks good but still has the problem with the text background.
IE Seems to be sorted except for the auto button missing.

I see you have the conveyer working too.

BaconFries · Post by **BaconFries** » Sat Jun 13, 2009 2:17 pm

Ok it looks like the author of the script no longer supports backbox

I am no longer supporting Backbox. Most of the questions have been answered already in other comments. Author of backbox script rupert olson

but I will still endeavor to get it working I think the issues are in the javascript I am not a js script writer but will try

I dont see any issues with the css... I got the conveyer to work in FF by placing it in a iframe so that it doesnt conflict with backbox script on same page....bear with me I look at it and if I cant I will let all know.

zinc · Post by **zinc** » Sat Jun 13, 2009 2:32 pm

BaconFries wrote:Ok it looks like the author of the script no longer supports backbox
I am no longer supporting Backbox. Most of the questions have been answered already in other comments. Author of backbox script rupert olson
but I will still endeavor to get it working I think the issues are in the javascript I am not a js script writer but will try I dont see any issues with the css... I got the conveyer to work in FF by placing it in a iframe so that it doesnt conflict with backbox script on same page....bear with me I look at it and if I cant I will let all know.

Sorry to butt in BF, Incase you overlooked my comment, do you think you might have a look at possibility of seeing if ALT text can be added to the control as well while you have the bonnet open so to speak?

Cheers.

BaconFries · Post by **BaconFries** » Sat Jun 13, 2009 2:40 pm

lol

sorry.....I ment to add that will be the easy part to fix while under the bonnet in fact it already got the spanners out and added this... I may have a solution to morgans problem with the text area I am going to make a demo and upload asap....

zinc · Post by **zinc** » Sat Jun 13, 2009 2:49 pm

BaconFries wrote:lol sorry.....I ment to add that will be the easy part to fix while under the bonnet in fact it already got the spanners out and added this... I may have a solution to morgans problem with the text area I am going to make a demo and upload asap....

As ALWAYS TOP DIAMOND!!!!

morgan · Post by **morgan** » Sat Jun 13, 2009 3:25 pm

When I go to the pub I always give the Bacon Fries a miss and plum for salt & vinigar, but I might just give them a go

. Thanks for the iframe tip, once you have a new download I will give it a go.

Thanks morgan

zinc · Post by **zinc** » Sat Jun 13, 2009 3:28 pm

Morgan, I looooove your avatar!!! It always makes me laugh when I see. Very clever!

BaconFries · Post by **BaconFries** » Sat Jun 13, 2009 6:44 pm

Ok issues with the stop/start not displaying fixed....was down to the png fix this was built into extension and will be removed in new download. When using extension in WB6 please disable this or the same problem will happen. The text overflow in FF I cant find a fix but I do have a work around.... what I have done is to place the text/description over the image with a transparent background, I done this in Fireworks but it can be done in any image editing software program of your choice take a look at how it looks....morgan this is only a alterative way as I cant find a fix ..
http://justtesting123.comuf.com/bbdemo/#location1

zinc · Post by **zinc** » Sat Jun 13, 2009 6:55 pm

BaconFries wrote:Ok issues with the stop/start not displaying fixed....was down to the png fix this was built into extension and will be removed in new download. When using extension in WB6 please disable this or the same problem will happen. The text overflow in FF I cant find a fix but I do have a work around.... what I have done is to place the text/description over the image with a transparent background, I done this in Fireworks but it can be done in any image editing software program of your choice take a look at how it looks....morgan this is only a alterative way as I cant find a fix ..
http://justtesting123.comuf.com/bbdemo/#location1

BF very elegant workaround!!!!!

Sorry did you say the new build is ready to download?

morgan · Post by **morgan** » Sat Jun 13, 2009 7:07 pm

Hi baconfries, nice workaround and alt tag, just one problem when I drag the page bigger it all goes out of shape. My monitor runs at 1680x1050 so plenty of room. Sorry to be a pain in the

. I am sure in a earlier demo this was sorted.

sneil69 I like my little man too, he does cheer you up.

BaconFries · Post by **BaconFries** » Sat Jun 13, 2009 7:34 pm

sneil the extension should be tested and uploaded later tonight I just discovered that I also had to remove the png fix code to sort the stop/start issue...along with the alt tag variable....

The demo is using old extension without the alt tag variable..although I have added the alt to the new one I still have to finish it and then test it in WB nothing hasnt been changed apart from adding the new main images and removing the png fix from html I cant test with your screen size but it should work ok wait till I release the extension and it you have problems let me know right it is time for a cool one .....

Eddy · Post by **Eddy** » Sun Jun 14, 2009 3:28 am

The text overflow in FF I cant find a fix

I changed the css a little for firefox if u use a lot text like morgan did.
Test this css with the code from sneil69.

Code: Select all

#lightbox{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 100;
	text-align: center;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #f7f6f1;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	border: 1px #CCC solid;
border-bottom:0px;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 0px;
	width: 0px;
	z-index: 0;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#060;
	font-weight:bold;
         cursor:pointer;
         }

#imageDataContainer{
	font: 14px Arial, Helvetica, sans-serif;
	background-color: #f7f6f1;
	height: 100%;
	border:1px #ccc solid;
border-top:0px;
margin:auto;
	}

#imageData{
	padding:0px 10px 10px 10px;
	}
#imageData #imageDetails{ width: 100%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
#imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
#imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
#imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 600px;
	background-color: #000;
	}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline;
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}

BaconFries · Post by **BaconFries** » Sun Jun 14, 2009 10:16 am

Hi Eddy thanks for this I have tried it with the code I have but now when it opens in lightbox the bottom area is too wide in IE7...but works perfect in FF. I have also changed the lightbox javascript to compensate for the change in the css but it still shows the bottom area to wide and with the change in the lightbox js when viewed in FF it distorts the image... I have tried to contact the author but he is no longer supporting the backbox I have read just about all postings in his blog looking for a fix...like you I have tried different thing to get this to work as it should but it giving me grey hair lol....right I am away to test some more....

Issue sorted with the above.... New download will follow shortly

morgan · Post by **morgan** » Sun Jun 14, 2009 2:16 pm

BaconFries if you do sort this I think it will be well used, have you seen how many people have looked at this post and stars original one. You could pop down the shop and get some just for men

BaconFries · Post by **BaconFries** » Sun Jun 14, 2009 2:40 pm

Afternoon morgan.....lol shhhh right after a few cool ones and help from Eddy I think it all sorted...I am posting a new download as I type this download and try... grab it at original posting

zinc · Post by **zinc** » Sun Jun 14, 2009 3:23 pm

BF, very nice will give it a shot tonight.

morgan · Post by **morgan** » Sun Jun 14, 2009 7:24 pm

Baconfries Fantastic news I will test it tomorrow morning, all my files for this site are at work. If the kids go to bed I might do it over logmein. I will put up a demo.

morgan

morgan · Post by **morgan** » Sun Jun 14, 2009 11:06 pm

Ok here we go,
I have placed BackBox on the page 4 times using 120x120 thums, some text on the first picture and three further pictures. It seems every thing is good except when you max the explorer or FF page. BB seems to move to a random place. BF you and Star have put so much into this can someone help. Here is my latest demo link.

http://www.schryver-restoration.com/tes ... age10.html#

The text in FF is perfect so dont change anthing there. On the whole this is a wicked extension just need to sort this position problem. Has it got anything to do with the original page size? this page is 994 x 776.

BF once again off for some ZZ, maybe catch up tomorrow.

BaconFries · Post by **BaconFries** » Sun Jun 14, 2009 11:44 pm

Hi morgan just looking in before I turn in too. I am viewing your page at
1024x768 which is equal to 994 x 776....and everything looks great in IE7, FF, Safari, Chrome, and Opera...all thumb images are postioned equal on page no overlaping none at far side etc...I am looking at your html now I dont think it should make any difference but try making the first thumb in extension Image1 slide, Image2 slide1, Image3 slide2, Image4 slide3....I cant say for sure but it may also be a conflict with conveyer I can only ask you to try placing in a iframe like I mentioned in other post and seeing if that helps...let me know I want to get this fixed as it is a great extension to have....

morgan · Post by **morgan** » Mon Jun 15, 2009 10:46 am

Morning, I have got two test links, on the first one I have changed the slide & picture ID's and removed the convryer. The second one I have removed everything except the 4 BB's and set the resolution to 770x600.
Still have the problem, it must be something I am doing?

http://www.schryver-restoration.com/tes ... age10.html#

http://www.schryver-restoration.com/tes ... age10.html#

Max the second link and see if it goes out of shape. I hope its just a setting my end.

BaconFries · Post by **BaconFries** » Mon Jun 15, 2009 9:51 pm

Evening morgan I have looked at both and the first link displays fine on my monitor the second link the top right image moves halfway behind the top left image... I have asked Eddy to take a look at it for me I will post asap his findings. Can I ask do you need to have as much text as you have I know it is going to be used for description etc but checking again in safari the text goes over the black overlay this may cause some users to complain if they are using safari as the browser such as macs. I have tried to fix this and it not possible Eddy has mentioned this too. As I have mentioned the author of this has stopped answering questions so I cant say if there is a fix or not... I will get back to you on this. I really want to get this sorted so I can say it is done and dusted for once and all.

morgan · Post by **morgan** » Mon Jun 15, 2009 10:04 pm

Hi BF, I checked with the site owners on the description length and they would like more, that multipart table sells for Â£10500 I think. I will keep it to a minimum and explain that you cant make it perfect in all browsers. I did the 770x600 with nothing else to help show the problem lets hope Eddy can help. I get a feeling the original author gave up because of these problems, maybe with you guys together it might get sorted.

Keep up the good work....

Eddy · Post by **Eddy** » Tue Jun 16, 2009 3:05 pm

Sorry Calum,I cannot find the problem with the overlay,I used different overlay codes but they dont work with larger images.

That one image moves is because in the page html is one div to mutch.

BaconFries · Post by **BaconFries** » Tue Jun 16, 2009 3:34 pm

Thanks for all you help Eddy as always it is appreciated so much...I guess it just cant be rectified easy and since the author no longer gives advice on backbox it probally wont get fixed soon ....anyway thanks again. Morgan sorry to say it looks like a bit of a lost battle

with this...I cant promise anything but I will keep at.

morgan · Post by **morgan** » Tue Jun 16, 2009 4:24 pm

Eddy wrote:That one image moves is because in the page html is one div to mutch.

Hi BF & Eddy, real shame its turned out this way. I just wondered what you ment by 'page html is one div to mutch' Eddy. Is this something I can change.

BaconFries · Post by **BaconFries** » Tue Jun 16, 2009 5:20 pm

Hi morgan you can try this...open the html that has your gallery on look for this
<img src="001_120.jpg" id="wb_Image1" alt="Thumbnail" title="Thumbnail" align="top" style= width="120" height="120"border="0"/>
</a>
</div>
</div>
</div>

Change to this
<img src="001_120.jpg" id="wb_Image1" alt="Thumbnail" title="Thumbnail" align="top" style= width="120" height="120"border="0"/>
</a>
</div>
</div>
there are four instances like this you will need to change each one by removing the last </div> try this and see if it sorts out the postioning on your page...
I have tried this myself and it makes no difference at my srceen settings 1024x768 I also changed the html page settings to 1650x1050 and view on monitor at 1024x768 and it shows ok .....do me a favour set you monitor to 1024x768 and view this
http://justtesting123.comuf.com/bbdemo/#location1 this has a html page set to 1650 you can view this in the source tell me how it looks at 1024x768 on your monitor

morgan take at look at this now not promising anything click on small image to revel larger image place mouse over larger to revel text overlay tell me what you think....
http://justtesting123.comuf.com/highdemo/

morgan · Post by **morgan** » Tue Jun 16, 2009 8:21 pm

HOLY MOLY it works

http://www.schryver-restoration.com/tes ... age10.html#

IE & FF took the last DIV out and it works.

Fantastic

Can that last DIV be removed from the extension or is it always a manual job.

BaconFries · Post by **BaconFries** » Tue Jun 16, 2009 9:17 pm

Yes it can be removed

morgan you dont have a email addy that I can send it to for you to try.....just incase it save you downloading etc etc and you can say whether it works or not....so I can finally do this

morgan · Post by **morgan** » Tue Jun 16, 2009 9:46 pm

Hi Baconfries have you had a few cold ones, I am having a little trouble understanding the last post

morgan · Post by **morgan** » Tue Jun 16, 2009 9:55 pm

Man I am so thick, you should be able to see it now.

BaconFries · Post by **BaconFries** » Tue Jun 16, 2009 10:01 pm

Hi morgan...yes the last </div> can be removed from the extension...so you wont need to remove manually... I was asking do you have a email address and I will send to you to test before posting. And if all fine and working then I will repost new download....and do this

morgan · Post by **morgan** » Tue Jun 16, 2009 10:12 pm

Just added MSN and email, will remove once done.

thanks

BaconFries · Post by **BaconFries** » Tue Jun 16, 2009 10:15 pm

Got it done and dusted........

morgan · Post by **morgan** » Tue Jun 16, 2009 10:49 pm

NO its not working?
This is with the latest extension
http://www.schryver-restoration.com/tes ... age10.html#

This is the one I manually removed the DIV
http://www.schryver-restoration.com/tes ... age10.html#

morgan · Post by **morgan** » Wed Jun 17, 2009 10:00 am

BF Yes Success it seems to work, I have put 8 BB on 1 page and everything is ok. If anybody can test this on other browsers that would really help before BF finishes the extension.

http://www.schryver-restoration.com/tes ... page9.html#

One last thing BF before you finalise it can the Thumbnail Alt tag and title be blank as default. This would be better if you dont need to use it.

Hope you had a good day BF

BaconFries · Post by **BaconFries** » Wed Jun 17, 2009 4:54 pm

Hi morgan ok I take it all working as it should....I assume it was the second demo I sent that did the trick?

www.wysiwygwebbuilder.com

BackBox Image Viewer Updated 25/06/11

BackBox Image Viewer Updated 25/06/11