ریسایز اتوماتیک عکس در ماژول اسلاید شو

[ali_85]

با سلام من ماژول اسلاید شو Lof ArticlesSlideShow را نصب کردم ولی عکس ها در این ماژول ریسایز نمیشن
این هم کد های css این ماژول هست
چطور کدی را باید در ان قرار بدهم که تمام عکس ها را اتوماتیک ریسایز کند و در اسلایدر قرار بدهد؟

کد: (انتخاب همه)

@charset "utf-8";
/* CSS Document */
.lof-ass{border:#F4F4F4 solid 1px; color:#FFF }
.lof-ass .lofass-container{width:auto; height:auto    ; overflow:hidden;    position:relative;}
.lof-ass li { list-style-type:none!important; padding:0; margin:0}
.lof-ass h4 { text-transform:inherit;margin:0!important;padding:0;background:none!important}
.lof-ass .preload{height:100%;width:100%;background:#E9E9E9;position:absolute;top:0;left:​0;z-index:100000;color:#FFF;text-align:center}
.lof-ass .preload div{height:100%;width:100%;background:transparent url(images/load-indicator.gif) no-repeat scroll 50% 50%;}
/* main flash */
.lof-ass .lof-main-wapper{
    overflow:hidden;
    padding:0px;
    height:100%;
    width:600px;
    position:relative;
    overflow:hidden;
}

.lof-ass .lof-main-wapper .lof-main-item{
    overflow:hidden;
    padding:0px;
    margin:0px;
    height:100%;
    width:100%;
    position:absolute;
}
.lof-ass .lof-main-wapper .lof-main-item img{
    padding:0px;    
}

.lof-ass .lof-description{
    z-index:3;
    position:absolute;
    bottom:20px;
    left:50px;
    max-width:600px;
    background:url(images/transparent_bg.png);
    padding:10px;

    /* filter:0.7(opacity:60) */
}
.lof-ass .lof-description p{;
    margin:0 8px;
    padding:8px 0
}
.lof-ass .lof-description h4 a{;    
    margin:0;
    color:#eef019;
    text-decoration:none;
    text-transform:none;
    font-size:80%;
    padding:10px 8px 2px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-ass .lof-description h4 a:hover{
    color:#FF6;
    text-decoration:underline;
}


/* item navigator */
.lof-ass ul.lof-navigator{top:0;padding:0;margin:0;position:absolute;width:100%;}
.lof-ass ul.lof-navigator li{
    cursor:hand;
    cursor:pointer;
    list-style:none;
    width:100%;
    padding:0!important;
    margin:0!important;
    overflow:hidden;
    background:none!important;
}
.lof-ass .lof-navigator-outer{
    position:absolute;
    right:0;
    top:00px;
    z-index:3;
    height:300px;
    width:310px;
    overflow:hidden;
}

.lof-ass .lof-navigator li.active{
    background:url(images/arrow-bg.png) no-repeat scroll left center!important;
}
.lof-navigator li:hover{}
.lof-ass .lof-navigator li h4{;
    font-size:100%;
    padding:15px 0 0 !important;
}
.lof-ass .lof-navigator li div{
    background:url(images/transparent_bg.png);;
    height:100%;
    position:relative;
    margin-left:15px;
    padding-left:15px;
    border-top:1px solid #E1E1E1;
}

.lof-ass .lof-navigator li.active div{background:url(images/grad-bg.gif);color:#FFF;}
.lof-ass .lof-navigator li img{    margin:15px 15px 10px 0px;float:left;border:#F5F5F5 solid 2px;}
.lof-ass .lof-navigator li:hover img{ -moz-transition:border-color 1s; border-color:#C3C3C3  }
.lof-ass .lof-navigator li.active h4, .lof-ass .lof-navigator a{color:#FFF;padding:0;right:0}
.lof-ass .lof-buttons-control  .lof-previous, .lof-ass .lof-buttons-control .lof-next {
    z-index:4;
    position:absolute;
    top:45%;
    height:38px;
    display:block;
    width:19px;
    overflow:hidden;
    text-indent:-999em;}
.lof-ass .lof-next{    right:0;background:url(images/next.png) repeat;}
.lof-ass .lof-previous{    left:0;    background:url(images/previous.png) repeat;}
.lof-ass  .lof-proccessbar{  width:100%; height:4px; position:absolute; top:0px;background:url(bg.png); z-index:9 }

.lof-ass    .lof-startstop{ width:54px;height:25px;cursor:hand; cursor:pointer; position:absolute; left:40%; z-index:8}
.lof-ass   .lof-startstop div{ width:100%; height:100%;}
.lof-ass   .lof-startstop .lof-start{ background:url(images/pause.png) no-repeat center center}
.lof-ass    .lof-startstop .lof-stop{ background:url(images/play.png) no-repeat center center}

/**
* Theme setting
*/
/* grey theme */
.lof-ass .grey{    border:1px solid #C5C5C5;    }
.lof-ass .grey .lof-navigator li{background:none!important;    }
.lof-ass .grey .lof-navigator li div{border-top:    1px solid #C5C5C5;}
.lof-ass .grey .lof-navigator li.active div{background:url(images/grey/grad-bg.png) repeat-x !important; color:#fff }
/* blue */
.lof-ass .blue{border:1px solid #D9E1E7;}
.lof-ass .blue .lof-navigator li{background:none!important;    }
.lof-ass .blue .lof-navigator li div{background:#F3F8FB; }
.lof-ass .blue .lof-navigator li.active div{background:url(images/blue/grad-bg.png) repeat-x  !important; color:#FFF  }
.lof-ass  .blue .lof-navigator h4,  .lof-ass  .blue .lof-navigator a{    color:#3B6197  }
.lof-ass   .blue .lof-navigator li div{    color:#676767;border-top:1px solid #D9E1E7; }
.lof-ass .blue .lof-navigator li.active a{ color:#FFF}
  /**
   * red
   */
.lof-ass .red{border:1px solid #E5D7F1;    }
.lof-ass .red .lof-navigator li{background:none!important;  }
.lof-ass .red .lof-navigator li div{border-top:    1px solid #C5C5C5;}
.lof-ass .red .lof-navigator li.active div{    background:url(images/red/grad-bg.png) repeat-x !important;  }

/**
   * purple
   */
.lof-ass .purple{border:1px solid #E5D7F1;}
.lof-ass .purple .lof-navigator li{background:none!important; }
.lof-ass .purple .lof-navigator li div{border-top:    1px solid #E5D7F1;background:#F9F6FD;color:#676767;}
.lof-ass .purple .lof-navigator li.active div{background:url(images/purple/grad-bg.png) repeat-x  !important; color:#fff }
.lof-ass .purple .lof-navigator li.active a { color:#FFF}
.lof-ass .purple .lof-navigator h4, .lof-ass .purple .lof-navigator a{color:#662072}

/**
   * pink
   */
.lof-ass .pink{    border:1px solid #E5D7F1;}
.lof-ass .pink .lof-navigator li{background:none!important; }
.lof-ass .pink .lof-navigator li div{border-top:    1px solid #E5D7F1;background:#F9F6FD;color:#676767;}
.lof-ass .pink .lof-navigator li.active div{background:url(images/pink/grad-bg.png) repeat-x !important; color:#fff }  
.lof-ass .pink .lof-navigator h4{color:#b40c81 }
/** css for override **/
    /* move the main wapper to the right side */
.lof-ass .lof-snleft .lof-main-wapper{margin-left:auto;margin-right:inherit;clear:both;height:300px;}
.lof-ass .lof-snleft .lof-main-item img {float:right;}    
    /* move the navigator to the left  side */
.lof-ass .lof-snleft .lof-navigator-outer{left:0;top:0;    right:inherit;    text-align:left;}
.lof-ass .lof-snleft .lof-description{left:auto;right:50px;    }
.lof-ass .lof-snleft .lof-navigator .active{background:url(images/arrow-bg2.gif) center right no-repeat;}
.lof-ass .lof-snleft .lof-navigator li div{margin-left:inherit;margin-right:18px;}
.lof-ass .lof-snleft .lof-navigator li.active div{margin-left:inherit;margin-right:18px;background:url(images/grad-bg2.gif)}
/** CSS3 **/
.lof-ass .lof-css3 .lof-description {-moz-box-shadow:0 0 2px #666;-webkit-box-shadow:0 0 2px #666;box-shadow: 0px 0px 2px #666;}
.lof-ass .lof-css3 , .lof-ass  .lof-css3 .preload { -moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333; box-shadow: 0px 0px 10px #333;}
/**
* Description default background color
*/
.lof-ass .desc-blue .lof-description{ background:#0096CE ;  }
.lof-ass .desc-purple .lof-description{ background:#8D5489  ;  }
.lof-ass .desc-red .lof-description{ background:#A92817;  }
.lof-ass .desc-green .lof-description{ background:#008040;  }
.lof-ass .desc-pink .lof-description{ background:#800080;  }
.lof-ass .desc-aqua .lof-description{ background:#058A9D;  }

[سعید حمزه زاده]

دوست عزیز یعنی چی ریسایز نمیشن؟!

خب دمو نشون بدید روی دمو بشه راهنماییتون کرد!

یا علی

[ali_85]

(۱۶-۹-۱۳۹۳ ۰۵:۲۰ عصر)سعید حمزه زاده نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دوست عزیز یعنی چی ریسایز نمیشن؟!

خب دمو نشون بدید روی دمو بشه راهنماییتون کرد!

یا علی

سلام علیکم

حالا چرا می خوای Resize بشه؟ منظورت رو واضح تر بگو؟
توی دموی افزونه که چنین چیزی وجود نداره و بنده هم تا به حال چنین چیزی ندیدم.
اما معمولا برای اسلایدشوها، تصویر موردنظر رو با اندازه دلخواهشون سایزبندی می کنن و بعد از طریق اسلایدشو نمایش می دن.
مگر اینکه شما منظور دیگه ای داشته باشی!

موفق باشید، التماس دعا

منظورم این هست مثلا ما تو تنظیمات ماژول را در ابعاد 500 در 300 قرار دادیم ولی عکسی که در مطلب داریم 600در600 هست خیلی از ماژول ها خودشان عکس را فیت ماژول می کنند ولی در اینجا فقط به اندازه 500 در 300 که تعریف شده از بالای عکس را نشان می دهد که خیلی بد می افتد حالا حساب کنید عکس های بزرگتر فقط قسمت بالایی عکس نمایش داده می شود.
م می خواهم خود به خود عکس در ابعاد ماژول فیکس بشه همین
تو عکس بیشتر مشخص هست که تنها قسمت بالای تصویر می افتد

[سعید حمزه زاده]

خب شما در افزونه کافیه اندازه تصاویر رو ثابت تعریف کنید و بهشون عرض و طول بدید