Размер превью картинки. Как ее изменить?

  • Автор темы Christall
  • Дата начала
Статус
Закрыто для дальнейших ответов.
C

Christall

Гость
#1
Буду очень благодарна,если поможете разобраться с одной вещью. Есть несколько картинок. На странице http://www.art-mobile.spb.ru/1.htm имеется несколько картинок. Что бы я не делала, в итоге- размер превьюшки не изменяется! Мне надо 100 % размера пикты, но к сожалению, она растягивается. Какой параметр изменить, чтобы превьюшка стала своего реального размера (110/114) и как убрать рамку вокруг превью?

из style.css

* {margin : 0; padding : 0;}
body{ background-color: White; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

.main{ width: 946px; margin: auto; }


.head1{ background-image: url(); background-position: top right;
background-repeat: no-repeat;
height: 113px;
}
.head1 a img{ margin:20px 15px 10px 0 ; }
.head1 h1{ font-family: Arial, Helvetica, sans-serif; font-size: 2.4em; padding-bottom: 5px; }
.head1 h2{ color: #999a9a; font-size: 0.8em; }

.head2{ background-image: url(); background-position: top;
background-repeat: no-repeat;
height: 128px;
padding:0 440px 0 0;
text-align: right;
}
.head2 a{ color: #4c848b;
font-size: 0.8em;
font-weight: bold;
padding:35px 10px 0 0;
display: block;
float: right;
letter-spacing: -1px;
line-height: 20px;
}
#row{
padding: 20px 10px 0 0;
}
.head2 a:hover{
color: #33595E;
}
.clear{ clear: both; font-size: 0.1em; height: 1px;}

/*êîíòåíò*/
.content{ background-image: url(pic/content.jpg); background-position: top right; background-repeat: no-repeat; }

.col1{ width: 40px; float: left; padding:20px 50px 0 0; font-size: 0.8em; color: #6a6a6a; line-height: 20px; }
.col2{ width: 110px; float: right; padding: 114px 0 0 10px; font-size: 0.8em; line-height: px; color: #6a6a6a;}

/*ëåâûé êîíòåíò*/
.col1 h1{ color: #FF5502; font-size: 1em; }
.right{ display: block; text-align: right; font-size:1em; font-weight: bold;line-height:25px;padding: 10px 0;color: Black; }
.col1 p{ padding-bottom: 20px; }
.col1 em{ color: Black; font-weight: bold; }
.col1 strong{ color: Black; }
.col1 b{ color: #df3f3f; }
.col1 a{ color: #4c848b; }
.col1 a:hover{ color: #33595E; }
.col1 ul { list-style: none; }
.col1 h2{ color: #BB3D00; font-size: 1.3em; padding-bottom: 10px; }
.col1 img{ float: left; margin: 10px; }

/*ïðàâûé êîíòåíò*/
.col2 p{ background-image: url(pic/p.gif); background-position: bottom; background-repeat: no-repeat; padding:20px 0 30px 0; }
.col2 strong{ color: #8f8f8f; display: block; padding-top: 10px; }

.col2 h2{ color: #DF3F3F; font-size: 1.1em; padding-top: 20px; }
.col2 a{ color: #6A6A6A; }
.col2 a:hover{ color: #303030; }
div#news{ color: Black; background-image: url(pic/p.gif); background-position: bottom; background-repeat: no-repeat; padding: 10px 0 20px 0; }
#news a{ color: #FF5502; padding-right: 5px; }
#news a img{ border: none; }
#news a:hover{ color: #BB3D00; }
.telefon{ background-image: url(pic/p.gif); background-repeat: no-repeat; background-position: bottom; padding: 10px 0 20px 60px; font-size: 0.8em; }
.telefon strong{ font-size: 1.5em; margin-top: -10px; color: #de0000; }

/*ïîäâàë*/
.footer{ background-image: url(pic/footer.jpg); background-repeat: repeat-x; background-position: bottom; height: 121px; font-size: 0.7em; color: White; }
.foot{ background-image: url(pic/foot.jpg);background-repeat: no-repeat; height: 121px; background-position: right bottom; }
.text{ padding-top: 85px; text-align: center;}
.text span{ background-color: #898988; margin-left: -110px;}
.text a img{ float: left; margin-left: 30px; }


/*öåíû*/
.col3{ width: 290px; float: left; padding-right: 20px }
.col4{ width: 290px; float: right; padding-right: 20px}
.col3 h2, .col4 h2{border-bottom: 1px solid #DF3F3F; width: 80%; color: #DF3F3F; margin-bottom: 10px; font-size: 1.1em; }
.col3 p, .col4 p{ padding-bottom: 20px; }
.col3 ul, .col4 ul{ list-style: none; }



из thickbox.css


html, body
{
min-height: 100%;
height: auto !important;
height: 100%;
}

#TB_window, #TB_load span
{
font: 12px Tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #333;
}

#TB_window a:link {color: #000;}
#TB_window a:visited {color: #000;}
#TB_window a:hover {color: #666;}
#TB_window a:active {color: #666;}
#TB_window a:focus{color: #666;}

#TB_overlay
{
position: absolute;
z-index:100;
width: 100%;
height: 100%;
top: 0;
left: 0;
min-height:100%;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

#TB_window
{
position: absolute;
background: #E7E7E7;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
}

#TB_window img
{
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption
{
height: 35px;
padding: 7px 30px 10px 25px;
}

#TB_brainF
{
float: left;
}

#TB_closeWindow
{
padding:0 0 0 0;
float: right;
}

#TB_secondLine
{
clear: both;
}

#TB_title
{
background-color:#e8e8e8;
height:27px;
}

#TB_load
{
position: absolute;
display:none;
height:120px;
width:150px;
z-index:101;

}

#TB_load h2
{
font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Sylfaen, Georgia, serif;
font-size: 2em;
color: #e1e1e1;
width: 100%;
text-align: right;
line-height: 1.1em;
}

#TB_load span
{
color: #eee;/*FFF0B7*/
white-space: nowrap;
font-size: 0.9em;
line-height: 0.9em;
width: 100%;
text-align: right;
background-color: #006418;
display: block;
padding: 0 1px 2px 0;;
}

#TB_load img
{
margin: 0 auto;
}

#TB_HideSelect
{
z-index:99;
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}



из gallery.css

#photo_gallery
{
/* background-color: #676767;*/
/* padding-left: 140px;*/
}
#photo_gallery ul
{
/* background-color: #006418;*/
/* padding: 11px 0px 3px 10px;*/
}
#photo_gallery ul li
{
display: inline;
}
#photo_gallery ul li img
{margin: 0 27px 20px 0%;
background: #FEFEFE;
border: 1px solid #AFAFAF;
height: 110px;
width: 110px;
padding: 0px;
float: left;
display: block;
}

#paded a img:hover {
border: 1px solid #555555;
}

/*àäìèíêà ôîòî*/

div#new a{ float: left; }
div#new a img{
border:none; margin:-2px 3px;
}
div#new a img:hover{
border:none;
}
select {
margin-bottom: 10px; width: 70%; height: 20px;
border: 1px solid #AFAFAF;
float: left;
}
table {
width: 50%
}
table input{ margin: 0; width: 150px;
border: 1px solid #a3a3a3;
background-color: #D6D6D6;
height: 20px;
margin: auto;
}

#search{ margin-bottom: 10px; width: 51%; height: 18px; border: 1px solid #AFAFAF; float: left; margin-right: 5px; }

input#del { width: 30px; height: 28px; background-image: url(pic/del.gif); background-repeat: no-repeat; border: none; cursor: pointer; margin-top: -2px; float: left; }

input#add { cursor: pointer;
border: none;
width: 21px;
height: 21px;
background-image: url(pic/ok.gif);
background-repeat: no-repeat;
margin-right: -25px;
background-color: transparent;
}

/*àäìèíêà êàðòèíîê */
table#pictur{
width: 100%;
border-top: 1px solid #a3a3a3;
border-left: 1px solid #a3a3a3;
text-align: center;
}
tr#shap{ background-color: #D6D6D6; height: 30px; }
table#pictur td{
border-right: 1px solid #a3a3a3;
border-bottom: 1px solid #a3a3a3;
}
table#pictur img{
border: 1px solid Black;
margin: 20px 0;
}
td#edit img{
border:none;
margin:10px 7px;
display: block;
}
td#edit a img:hover{
border:none;
}
tr#shap input{ width: 60px; height: 20px;}
tr#shap input#browse{ width: 200px; height: 20px; }
tr#shap textarea { width: 270px; overflow: auto; height: 20px;}
tr#shap img{ border:none; margin: 0; }
tr#shap a img:hover{
border:none;
}



из thickbox.js


$(document).ready(TB_init);

function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
return false;
});
}

function TB_show(caption, url, imageGroup) {
try {
if (document.getElementById("TB_HideSelect") == null) {
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
}

if(caption==null){caption=""};

$(window).scroll(TB_position);

TB_overlaySize();

$("body").append("<div id='TB_load'><h2></h2><span></span><img src='galery/loading.gif' title='' alt=''/></div>");
$("#TB_load").click(TB_remove);
TB_load_position();

var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php|\.cfm|\.asp|\.aspx|\.jsp|\.jst|\.rb|\.txt|\.bmp/g;
var urlType = url.toLowerCase().match(urlString);

if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){

TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'><a href='#'>âïåðåä</a> &gt;</span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'>&lt; <a href='#'>íàçàä</a></span>";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Ôîòî " + (TB_Counter + 1) +" èç "+ (TB_TempArray.length);
}
}
}

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)&&(caption!="ëèöåíçèÿ")) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if ((imageHeight > y)&&(caption!="ëèöåíçèÿ")) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='êëèêíèòå, ÷òîáû çàêðûòü'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='êëèêíèòå, ÷òîáû çàêðûòü'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'><span id='TB_brainF'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</span><span id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>çàêðûòü</a></span></div></div>");

$("#TB_closeWindowButton").click(TB_remove);

if (!(TB_PrevHTML == "")) {
function goPrev(){
if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
$(document).unkeyup();
TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}

$("#TB_prev").click(goPrev);

$(document).keyup( function(e){ var key = e.keyCode; if(key == 37){goPrev()} });
}

if (!(TB_NextHTML == "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
$(document).unkeyup();
TB_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}

$("#TB_next").click(goNext);

$(document).keyup( function(e){ var key = e.keyCode; if(key == 39){goNext()} });
}

TB_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(TB_remove);
$("#TB_window").css({display:"block"});
}

imgPreloader.src = url;
}

if(urlType=='.htm'||urlType=='.html'||urlType=='.php'||urlType=='.asp'||urlType=='.aspx'||urlType=='.jsp'||urlType=='.jst'||urlType=='.rb'||urlType=='.txt'||urlType=='.cfm' || (url.indexOf('TB_inline') != -1) || (url.indexOf('TB_iframe') != -1) ){//code to show html pages

var queryString = url.replace(/^[^\?]+\??/,'');
var params = TB_parseQuery( queryString );

TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;

if(url.indexOf('TB_iframe') != -1){
urlNoQuery = url.substr(0,TB_strpos(url, "?"));
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><iframe src='"+urlNoQuery+"' id='TB_iframeContent' style='width:"+(ajaxContentW + 30)+"px;height:"+(ajaxContentH + 18)+"px;'></iframe>");
}else{
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}

$("#TB_closeWindowButton").click(TB_remove);

if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else{
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
});
}
}

$(window).resize(TB_position);

} catch(e) {
alert( e );
}
}

function TB_remove() {
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
$("#TB_load").remove();
$(document).unkeyup();
return false;
}
function TB_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();

$("#TB_window").css({width:TB_WIDTH+"px",left: ((pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-TB_HEIGHT)/2))+"px" });
TB_overlaySize();
}
function TB_overlaySize(){
if (window.innerHeight && window.scrollMaxY) {
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
yScroll = document.body.scrollHeight;
} else {
yScroll = document.body.offsetHeight;
}
$("#TB_overlay").css("height",yScroll +"px");
$("#TB_HideSelect").css("height",yScroll +"px");
}
function TB_load_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_load")
.css({left: ((pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
.css({display:"block"});
}
function TB_parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params;
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs.split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
function TB_getPageScrollTop(){
var yScrolltop;
if (self.pageYOffset) {
yScrolltop = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScrolltop = document.documentElement.scrollTop;
} else if (document.body) {
yScrolltop = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScrolltop)
return arrayPageScroll;
}
function TB_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;

arrayPageSize = new Array(w,h)
return arrayPageSize;
}
function TB_strpos(str, ch) {
for (var i = 0; i < str.length; i++)
if (str.substring(i, i+1) == ch) return i;
return -1;
}
 
C

Christall

Гость
#2
речь идет о внешней рамке вокруг превью

А,всё нашла ошибку! :)
 
Статус
Закрыто для дальнейших ответов.