رفتن به مطلب

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا
ali_85

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

توسط ali_85، در افزونه

پست های پیشنهاد شده

ali_85    1

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;  }
 

به اشتراک گذاری این ارسال

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

yousof2000    36

yousof2000
ارسال شده در

سلام علیکم

 

حالا چرا می خوای Resize بشه؟ منظورت رو واضح تر بگو؟

توی دموی افزونه که چنین چیزی وجود نداره و بنده هم تا به حال چنین چیزی ندیدم.

اما معمولا برای اسلایدشوها، تصویر موردنظر رو با اندازه دلخواهشون سایزبندی می کنن و بعد از طریق اسلایدشو نمایش می دن.

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

 

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

به اشتراک گذاری این ارسال

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

ali_85    1

ali_85
ارسال شده در (ویرایش شده)

سلام علیکم

 

حالا چرا می خوای Resize بشه؟ منظورت رو واضح تر بگو؟

توی دموی افزونه که چنین چیزی وجود نداره و بنده هم تا به حال چنین چیزی ندیدم.

اما معمولا برای اسلایدشوها، تصویر موردنظر رو با اندازه دلخواهشون سایزبندی می کنن و بعد از طریق اسلایدشو نمایش می دن.

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

 

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

 

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

م می خواهم خود به خود عکس در ابعاد ماژول فیکس بشه همین

تو عکس بیشتر مشخص هست که تنها قسمت بالای تصویر می افتد

62581920323334724006.png

ویرایش شده توسط ali_85

به اشتراک گذاری این ارسال

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

yousof2000    36

yousof2000
ارسال شده در

باید توی تنظیمات ماژول دقت بکنی ببینی چنین امکانی براش تعریف شده یا نه؟!

اگه شده بود که متناسب با نیازت باید تغییرات رو انجام بدی. البته بعید می دونم چنین چیزی برای افزونه های اسلایدشو تعریف بشه و معمولا چنین چیزی رو برای بعضی از گالری های تصاویر قرار میدن.

اگه نبود، بهترین کاری که معمولا همه انجامش میدن اینه که شما اندازه تصویرت رو متناسب با اندازه ای که در ماژول اسلایدشو تعریف می کنی، طراحی کنی. هیچ مشکلی هم نداره.

 

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

به اشتراک گذاری این ارسال

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
برو به فهرست موضوع ها
×
×
  • افزودن...