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

Тема в разделе "Web 2.0, AJAX, Ruby, RSS технологии", создана пользователем Christall, 6 ноя 2007.

Статус темы:
Закрыта.
  1. Christall

    Christall Гость

    Буду очень благодарна,если поможете разобраться с одной вещью. Есть несколько картинок. На странице 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;
    }
     
  2. Christall

    Christall Гость

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

    А,всё нашла ошибку! :)
     
  3. Christall

    Christall Гость

    теперь проблема- изменить расстояние между превьюшками :)

    это как раз то,где ты указал вопросом.
     
Загрузка...
Статус темы:
Закрыта.

Поделиться этой страницей