Jump to content

Thickbox full image view (same old problem)

Jim_C
 Share

Recommended Posts

Jim_C Rookie

Jim_C

Posted
Posted

Hi,

My issue is what seems to be a chronic one with PS users: when I want to enlarge my product image I want to see it in its ORIGINAL format. Not the Thickbox 600x600. I want the full one that I upload, like 1024 x 768 weighing less than 2mb.
Like everyone else I've played around with the Thickbox image settings, no result.
Like everyone I've also tried playing around with the CSS (margin, padding..) and Javascript too, but didn't work either.

I've gone through this forum, in English and French, and noticed there are SO many people asking the same question. I find it hard to believe that none of our expert "tweakers" can give a hint on how to obtain a "Lightbox"-type result.

My upcoming eCommerce site will need sharp well-sized images for selling, just like all of us I assume.

Much appreciate any hints you can provide as I'm getting a bit desperate now. Thanks a lot ;)

Link to comment
Share on other sites
angielyn Newbie

angielyn

Posted
Posted

I'm having this problem right now... mind helping me in english???? please lol Until then I'll attempt babelfish.


Ok, babelfish messed up the code so finally decided to just copy and paste what you had there without babelfish and it worked perfect... DUH me.... Then I had the problem of not being able to view all my images "no scroll bar" which I fixed with this below...

In the thickbox.css under #TB_window I changed the "fixed" to absolute. Then also under #TB_window the top:50%; you may have to change the 50% to something higher to move your images down some. Right now with my first image up and running it's "stuck" up under my browser so I changed the 50 to 75 which may have to be played with, not sure yet.

Link to comment
Share on other sites
Jim_C Rookie

Jim_C

Posted
  • Author
Posted

Hi Angielyn,

Here's the translation:

To display a full-sized image of your product like, for example, an uploaded shot 1024 x 768, you must modify the thickbox-modified.js file located under js > jquery.
Replace line 20 :

imgPreloader=new Image();imgPreloader.onload=function(){imgPreloader.onload=null;var pagesize=tb_getPageSize();var x=pagesize[0]-150;var y=pagesize[1]-150;var imageWidth=imgPreloader.width;var imageHeight=imgPreloader.height;if(imageWidth>x){imageHeight=imageHeight*(x/imageWidth);imageWidth=x;if(imageHeight>y){imageWidth=imageWidth*(y/imageHeight);imageHeight=y;[spam-filter]else if(imageHeight>y){imageWidth=imageWidth*(y/imageHeight);imageHeight=y;if(imageWidth>x){imageHeight=imageHeight*(x/imageWidth);imageWidth=x;[spam-filter]



with this code:

imgPreloader=new Image();
imgPreloader.onload=function(){
imgPreloader.onload=null;
var imageWidth = imgPreloader.width;var imageHeight = imgPreloader.height;



Then you can do some tweaking to adjust the positionning of your full-sized thickbox as opposed to the size of your screen.

Afterwards, you can play around with the white portion around the shot but that's subject to another translation.

Hope this helps ;)

Link to comment
Share on other sites
  • 2 weeks later...
ObsessionO Newbie

ObsessionO

Posted
Posted

Thank you this works wonderful. It should be a sticky on the forums. Do you know how to modify the image page to that the image shows large like the thick box size, and how to move the more details and add to cart sections so that way you can just see the image in the center and those sections below?

Thanks.

Link to comment
Share on other sites
Jim_C Rookie

Jim_C

Posted
  • Author
Posted

Hi ObsessionO,

In reply to your questions:

Do you know how to modify the image page to that the image shows large like the thick box size,


I believe it's the Thickbox Large dimensions that you should change. Try a few testings with increased dimensions.


and how to move the more details and add to cart sections so that way you can just see the image in the center and those sections below?


I think that this is more related to tweaking the CSS sheet (located in themes > mytheme > css > global.css ) than Thickbox.

Link to comment
Share on other sites
ObsessionO Newbie

ObsessionO

Posted
Posted

Hi Jim,

Thanks for the feedback. I have been playing with the global.css, but I am not sure how I would change it there. On the products page the image is 300 x 300. Then when I click the image the thickbox comes up as 600 x 600 with now appropriate image to match.

I can change the size of the image from 300 x 300 to other sizes, from the back office, but then it breaks the page because the more details box, and the add to cart, add to my wishlist blocks are right beside the image.

I am trying to find out how to move them right below this image, then I can make the image 550 x 600 without breaking the page.

Link to comment
Share on other sites
Jim_C Rookie

Jim_C

Posted
  • Author
Posted

Hi ObsessionO,

Then in your css perhaps try to add a margin-top: 350px like below.
Then in the Thickbox play around with the 'Large' size again and see how the basket fits into your page. It's worth a try.

#primary_block form#buy_block{
   background: #f1f2f4 url('../img/product-buy-bg.gif') repeat-x top left;
   font-size:1.1em;
   padding:0.7em;
   color:#374853;
   border: 1px #d0d3d8 solid;
   margin-top: 350px;
}



If you're using Mozilla Firefox then I'd really recommend you install the Firebug plugin that will help you a lot, and save you a LOT of time testing https://addons.mozilla.org/fr/firefox/downloads/file/46321/firebug-1.3.2-fx.xpi

5086_0adiYYVtmQfoiwLdBARs_t

Link to comment
Share on other sites
Jim_C Rookie

Jim_C

Posted
  • Author
Posted

ObsessionO,

Here's another suggestion for your global.css, I think it'll be better than the one I've just given above : change the margin-left from 1.1em to 30px and see how it goes.

#primary_block #pb-left-column{
   float:left;
   margin-left:30px;
   width:233px;

Link to comment
Share on other sites
ObsessionO Newbie

ObsessionO

Posted
Posted

Thank you for the post.

I found this

}
#primary_block #image-block{
border:#d0d1d5 solid 1px;height:300px;width:300px;

I changed this, to the size I wanted and this worked fine. I also adjusted the price block as well so that they take up the full space below it.

}
#primary_block #pb-left-column{
float:left;
margin-left:1.1em;
width:533px;
}


I have to tweek it a bit more, but your suggestion was just the thing.


I appariciate your suggestions.

Link to comment
Share on other sites
ObsessionO Newbie

ObsessionO

Posted
Posted

Just one more thing I did. In the back office. I created a new style for the image. Eg. The product image uses a style of large 300px x 300 px. so I created a new style of 550 x 600. I called it a different name. Then I went into my theme and into the product tpl and changed this line the image name from large.jpg to my name sytle name in the back end.

b%5Dname|escape:'htmlall':'UTF-8'}"/>
{else}
%7B$img_prod_dir%7D%7B$lang_iso%7D-defauname|escape:'htmlall':'UTF-8'}" />
{/if}


Now the page looks very appropriate. I thank you so much. Now I have to go and change the other images, but this is the look that I wanted. :)

Link to comment
Share on other sites
  • 2 years later...
  • 5 months later...
  • 3 weeks later...
  • 8 months later...
Gomlers Newbie

Gomlers

Posted
Posted (edited)
In version 1.4.5.1 Folder & File : js/jquery/jquery.fancybox-1.3.4.js line 1108 autoscale has to be false and line 1109 also has to be false.

 

Thank you!

(This worked also in 1.4.9.0)

 

However - now, the fancybox opens in the size of thick-box-settings in BO. This is set to 1200 x 1600 in my store.

But what if I have a product-image which is 300x400 - the fancybox will still open in 1200 x 1600, and then show the small productimage in the middle - width LARGE whitespaces around.

 

If you understood my problem - do you have a way to fix this as well? :)

Edited by Gomlers (see edit history)
Link to comment
Share on other sites
yewster Newbie

yewster

Posted
Posted (edited)

Thank you!

(This worked also in 1.4.9.0)

 

However - now, the fancybox opens in the size of thick-box-settings in BO. This is set to 1200 x 1600 in my store.

But what if I have a product-image which is 300x400 - the fancybox will still open in 1200 x 1600, and then show the small productimage in the middle - width LARGE whitespaces around.

 

If you understood my problem - do you have a way to fix this as well? :)

 

Enlarge your 300 x 400 image to 1200 x 1600 and re-upload.

 

If thickbox in BO is set to 1200 x 1600 and you regenerate the images. It will add empty white space to the original image. It won't stretch or expand it but it will add blank space around it.

 

Another method you can use is to replace the file saved in the folder "img/p/ ... " and has the filename ending with " **-thickbox ": The current image size should be 1200 x 1600 and it has the blank space (empty frame) around it. Just replace it with your 300 x 400 image.

 

If you do above step, don't regenerate the images in BO.

Edited by yewster (see edit history)
Link to comment
Share on other sites
Gomlers Newbie

Gomlers

Posted
Posted

Thank you for answering - however:

Enlarge your 300 x 400 image to 1200 x 1600 and re-upload.

 

It's not possible to enlarge the 300x400 image, because that's how big the image is. Enlarging it will make it look bad.

 

What I meant was to open the thickbox relative to how big the actual productimage is - until max size of 1200 x 1600.

So if the image IS 300x400 - open the thickbox in 310x410 (give a 10px white border) if the image is 800x600, open the thickbox in 810x610 - and if 1200x1600 - well, no surprise: Open the thickbox in 1200x1600 ;)

 

Possible?

Link to comment
Share on other sites
yewster Newbie

yewster

Posted
Posted (edited)

Thank you for answering - however:

 

 

It's not possible to enlarge the 300x400 image, because that's how big the image is. Enlarging it will make it look bad.

 

What I meant was to open the thickbox relative to how big the actual productimage is - until max size of 1200 x 1600.

So if the image IS 300x400 - open the thickbox in 310x410 (give a 10px white border) if the image is 800x600, open the thickbox in 810x610 - and if 1200x1600 - well, no surprise: Open the thickbox in 1200x1600 ;)

 

Possible?

 

 

 

Good news for you, it is actually Possible without modifying the core files. But you need additional steps to do it.

 

What you need to do in backoffice is to change the thickbox image size (Preference->Images) to 300 x 400 and upload the product image. It will be 300 x 400 when viewed in thickbox.

 

When you want the image to be 1200 x 1600. Change the thickbox image size (Preference->Images) to 1200 x 1600 and upload the another product image. It will be 1200 x 1600 when view in thickbox

 

So you have to keep on switching the thickbox image size according to what size you want the image to be.

 

Whatever you do, do not regenerate image or all of your product images will be the same size as set in the thickbox image size.

Edited by yewster (see edit history)
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...