dflow Posted August 4, 2011 Share Posted August 4, 2011 i have the following script calling a list of images i would like to force image resize to width:500px for the gallery image //Add image $RsImage_list_tableHTML .= " <td width=\"88\">"; $RsImage_list_tableHTML .= "<a href=\"../../app-images/{$row_RsImage_image['ImageURL']}\""; $RsImage_list_tableHTML .= " rel=\"lightbox[{$row_RsImage_image['ID']}]\">"; $RsImage_list_tableHTML .= "<img src=\"../../app-images/{$row_RsImage_image['ImageURL']}\" width=\"88\" height=\"66\" border=\"0\"/>"; $RsImage_list_tableHTML .= "</a>"; $RsImage_list_tableHTML .= "</td>\n"; //lightbox css #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: 505px; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/ Share on other sites More sharing options...
IrOnMaSk Posted August 4, 2011 Share Posted August 4, 2011 it's more a question of css but i'm sure people can answer it... try change these two lines Quote #lightbox img{ width: 505px; height: auto;} if not working trying this Quote #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1252025 Share on other sites More sharing options...
dflow Posted August 4, 2011 Author Share Posted August 4, 2011 Quote it's more a question of css but i'm sure people can answer it... try change these two lines Quote #lightbox img{ width: 505px; height: auto;} i did didnt help if not working trying this Quote #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1252086 Share on other sites More sharing options...
IrOnMaSk Posted August 4, 2011 Share Posted August 4, 2011 so the images is always show up by their default sizes? check the deminsion of the image once loaded against the actual image and see if they are the same Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1252090 Share on other sites More sharing options...
dflow Posted August 4, 2011 Author Share Posted August 4, 2011 Quote so the images is always show up by their default sizes? check the deminsion of the image once loaded against the actual image and see if they are the same [/quoteyep the same thar is why i want to force it to resize Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1252106 Share on other sites More sharing options...
dflow Posted August 5, 2011 Author Share Posted August 5, 2011 yep same size Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1252279 Share on other sites More sharing options...
dflow Posted August 7, 2011 Author Share Posted August 7, 2011 guys i found a resize sciprt on the fly i have a syntax question: how should i implement this: //<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" /> into this script: //Add image $RsImage_list_tableHTML .= " <td width=\"88\">"; $RsImage_list_tableHTML .= "<a href=\"../../app-images/{$row_RsImage_image['ImageURL']}\""; $RsImage_list_tableHTML .= " rel=\"lightbox[{$row_RsImage_image['ID']}]\">"; $RsImage_list_tableHTML .= "<img src=\"../../app-images/{$row_RsImage_image['ImageURL']}\" width=\"88\" height=\"66\" border=\"0\"/>"; $RsImage_list_tableHTML .= "</a>"; $RsImage_list_tableHTML .= "</td>\n"; Link to comment https://forums.phpfreaks.com/topic/243840-help-with-lightbox-resize/#findComment-1253754 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.