Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Popup image size


dreams3577

Recommended Posts

Hi All

 

V2.3.1.. How do I increase the size of the large popup image when clicking on the image on the 'product_info.php' page..

 

I know its using 'fancybox' but I cant see where to increase the size of the large image..

 

many thanks

steve

Link to comment
Share on other sites

  • 2 months later...

Did you ever find an answer? I have the same question, and I can't figure it out either.

Link to comment
Share on other sites

you need to change the css look in:

 

ext/jquery/fancybox/jquery.fancybox-1.3.4.css

 

to change the frame that the image is displayed in change this:

 

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}

 

to change the image size inside the outer box change:

 

#fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
}

 

Regards

 

Mark

Link to comment
Share on other sites

  • 2 months later...

that's NOT working ! the #fancybox-outer { is the format where the buttons are on. The #fancybox-img { change the size of the image BUT the FRAME where the image is in stay the same. I tried but could find the solution.

Link to comment
Share on other sites

I found a solution. in ext\jquery\fancybox\jquery.fancybox-1.3.4.pack.js find on line 45 :

b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,

 

I changed it to :

b.fn.fancybox.defaults={padding:0,margin:5,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,

 

when padding is 0 you dont have a frame around the images

the margin is the margin between the top and the bottom of your browser (between the menubartatusbar), when using F11 (Full Screen) the Popup automatic resices the images.

Of course your images need to be big enough.

 

Good luck

Link to comment
Share on other sites

if you change ;

ext\jquery\fancybox\jquery.fancybox-1.3.4.pack.js

 

b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,

 

into :

 

b.fn.fancybox.defaults={padding:0,margin:0,opacity:true,modal:false,cyclic:false,scrolling:"auto"

 

and in the ext/jquery/fancybox/jquery.fancybox-1.3.4.css

 

change :

 

#fancybox-outer {

position: relative;

width: 100%;

height: 100%;

background: #fff;

 

into :

 

#fancybox-outer {

position:inherit

width: 100%;

height: 100%;

background: #000;

 

change :

 

#fancybox-close {

position: absolute;

top: -15px;

right: -15px;

 

into

 

#fancybox-close {

position: absolute;

top: 20px;

right: -30px;

 

change :

 

#fancybox-left:hover span {

left: 20px;

}

#fancybox-right:hover span {

left: auto;

right: 20px;

 

into :

 

#fancybox-left:hover span {

left: 5px;

}

#fancybox-right:hover span {

left: auto;

right: 5px;

 

the fancybox will fill the browser as big the images are with the height or width as maximum.

You will have a Transparent frame and the buttons are on different position.

 

Try it, you will lovi't.

 

Grtz

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...