| Author |
 Topic  |
|
|
[email protected]
VP-CART New User
149 Posts |
 Posted - November 18 2015 : 10:49:23
|
Hi,
I like the fact that the slider, itself resizes when the browser is resized but the pictures in the slider do not resize. This creates a problem when I am designing for a widescreen monitor and the site is visited by a monitor of lower resolution.
Is there something I can add to css to resize the pictures in the slider corresponding with the resolution? |
Edited by - [email protected] on November 25 2015 12:30:06 |
|
|
danielrichardson
VP-CART Super User
Australia
276 Posts |
Posted - November 18 2015 : 11:04:07
|
Hello there,
Unfortunetaly i can''t replicate this.
Have change my screen resolution with 800 X 600, 1024 X 768, 1280 X 1024, and image slider automaticaly resize. FYI I used newest chrome version.
Also please look at online screen resolution checker below:
http://quirktools.com/screenfly/#u=http%3A//demo800.vpasp.com&w=1024&h=600
Daniel. |
Edited by - danielrichardson on November 18 2015 11:06:10 |
 |
|
|
[email protected]
VP-CART New User
149 Posts |
|
|
[email protected]
VP-CART New User
149 Posts |
Posted - November 18 2015 : 11:51:37
|
Ahh, ok, it is resizing (as best it can) but just not effectively doing well at 1024.
Perhaps this should just be a matter of designing for 1024 and letting it enlarge for bigger sizes |
|
|
|
FCS-Webmaster
VP-CART New User
Canada
120 Posts |
|
|
serjtankian
VP-CART Super User
Armenia
378 Posts |
|
|
danielrichardson
VP-CART Super User
Australia
276 Posts |
Posted - November 19 2015 : 01:15:19
|
@FCS-Webmaster,
Unfortuneately i can''t see your pics attachment. Please reupload it.
Thanks. |
|
|
|
bryan23
Starting Member
Philippines
7 Posts |
Posted - November 19 2015 : 03:42:57
|
Hi there,
i have tested it and figured it out how to fix it. try to add this code at the bottom of you main-responsive.css
@media (max-width: 1024px){
.lower-header.container {
padding: 0px;
}
}
hope that works.
Brent |
|
|
|
danielrichardson
VP-CART Super User
Australia
276 Posts |
Posted - November 24 2015 : 06:28:57
|
| i have tested and works fine. thanks Brent. |
|
|
|
[email protected]
VP-CART New User
149 Posts |
Posted - November 24 2015 : 11:12:18
|
Can you give me a URL to see it in action?
I''ve been trying to add this code but not seeing changes in resizing the pictures in the slider. |
|
|
|
[email protected]
VP-CART New User
149 Posts |
Posted - November 24 2015 : 11:15:46
|
I''m thinking there might be some confusion.
The slider, itself, resizes fine. It''s the pictures that are getting cut off.
For example, one image might have some text on the left hand side that displays properly on a 1200+ resolution but when resized to 1024, the slider will resize but the picture inside it doesn''t so the text in the picture is cut off. |
|
|
|
bryan23
Starting Member
Philippines
7 Posts |
Posted - November 24 2015 : 22:15:41
|
Hi there,
try to add this css code :
.camera_target .cameraCont .cameraSlide img {
max-width: 100% !important
margin: auto !important;
}
this will overwrite the css of the cameraslider style.
let me know if this works on your end.
Brent |
|
|
|
[email protected]
VP-CART New User
149 Posts |
Posted - November 25 2015 : 12:29:42
|
Fantastic!
If anyone else is looking to acheive the same effect, use Bryan''s code.
(There is one missing semi-colon that will prevent it from working so I will repost)
.camera_target .cameraCont .cameraSlide img {
max-width: 100% !important;
margin: auto !important;
}
I put it in /common/cameraslider/camera.css at the bottom |
|
|
|
[email protected]
VP-CART New User
149 Posts |
Posted - November 25 2015 : 15:14:30
|
I took what Bryan suggested and elaborated.
Bryan''s solution works but may cause images to be skewed while resizing (width adjusts nicely but since the height is constricted, it skews the picture)
Here are the changes I made to have both the slider itself, and images inside stay proportional while resizing.
Instructions for adjusting camera slider height and keep your pictures proportionate while resizing.
(Obviously make a back up of camera, camera.min.js, camera.css before commencing)
*********Only make these changes if you don''t want your slider to be as tall as VPASP set them. If you are fine with the size, do not alter these****
Change these values in camera.js
(around line 30)
(the default value is 50%)
height: ''100%'', //here you can type pixels (for instance ''300px''), a percentage (relative to the width of the slideshow, for instance ''50%'') or ''auto''
(around line 48)
(the default value is 200px)
minHeight: ''150px'', //you can also leave it blank
Make the same changes as above in: camera.min.js
(do a search for:
height:"50%",imagePath:"images/",hover:true,loader:"pie",loaderColor:"#eeeeee",loaderBgColor:"#222222",loaderOpacity:.8,loaderPadding:2,loaderStroke:7,minHeight:"200px") and replace height and minHeight to the same values as you changed in the above file.
****end of height alteration****
In camera.css, find
.camera_fakehover {
height: 100%;
min-height: 60px;
position: relative;
width: 100%;
z-index: 1;
}
change to:
.camera_fakehover {
display: block;
width: 100% !important;
height: 100% !important;
min-height:60px;
max-height:150px; //whatever maximum height you want
z-index: 1;
}
and add this entry to the bottom of the file
.camera_target .cameraCont .cameraSlide img {
display: block;
width: 100% !important;
height: auto !important;
margin: auto !important;
} |
|
|
|
RainHarvest313
Starting Member
USA
7 Posts |
Posted - February 01 2017 : 15:45:45
|
Hello all,
I know this thread has been marked "solved", but I''ve tried updating the camera and camera.min.js files per sunshore''s suggestions below, along with the modifications/advice from bryan23 and serjtankian.
The issue I''m having may even be unique. The problem is primarily with mobile devices with the tall and narrow display. When displaying the banner, these devices display it the worst. The image in the banner gets skewed and stretched out much taller than it should be. Even when you turn the device 90 degrees so that it is wide, not tall, the banner image is still stretched out taller than native (not quite as bad when tall, but still noticeable). I''ve played with different height values and units in the Layout Manager, to no avail. Is there a way to fix this mobile-responsive display dilemma?
Tanks a lot,
D Man Dan |
|
|
|
danielrichardson
VP-CART Super User
Australia
276 Posts |
Posted - February 10 2017 : 06:59:42
|
@RainHarvest313, please add the following code in in the common/cameraslider/camera.css
@media (max-width: 500px) {
.camera_wrap { height: auto !important; min-height: 100px; }
.cameraSlide img { height: 100% !important; width: 100% !important; margin-left: 0px !important; }
.camera_fakehover { min-height: 100px; } |
Edited by - danielrichardson on February 10 2017 07:02:49 |
|
|
|
Topic |
|
All Forums
[Solved] Resizing pictures in slider
New Topic
Printer Friendly
TrustGuard - PCI Security Scanner
