BackBox Image Viewer **Updated 25/06/11**
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
BackBox Image Viewer **Updated 25/06/11**
***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
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
Last edited by BaconFries on Sat Jun 25, 2011 6:38 pm, edited 12 times in total.
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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...
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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....
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.
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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...
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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
http://justtesting123.comuf.com/bbdemo/# it is just using the standard doctype DTD HTML 4.01 Transitional
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
Ok it looks like the author of the script no longer supports backbox
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.I am no longer supporting Backbox. Most of the questions have been answered already in other comments. Author of backbox script rupert olson
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?BaconFries wrote:Ok it looks like the author of the script no longer supports backboxbut 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.I am no longer supporting Backbox. Most of the questions have been answered already in other comments. Author of backbox script rupert olson
Cheers.
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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
http://justtesting123.comuf.com/bbdemo/#location1
BF very elegant workaround!!!!!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
Sorry did you say the new build is ready to download?
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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 .....
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 .....
I changed the css a little for firefox if u use a lot text like morgan did.The text overflow in FF I cant find a fix
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
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
Issue sorted with the above.... New download will follow shortly
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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.
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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....
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....
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.
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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.
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....
Keep up the good work....
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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.
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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/
<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/
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.
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm
- BaconFries
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 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#
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#
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
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
-
- Posts: 5364
- Joined: Thu Aug 16, 2007 7:32 pm