رفتن به مطلب

ساخت جعبه آخرین مطالب


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

با سلام خدمت اساتید وردپرس

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

ممنون میشم اگه راهنماییم کنید

عکس :

05313148019815612942.jpg

post-3247-0-40621600-1385169548_thumb.jp

لینک به ارسال

ممنون ، ولی میشه یه توضیح کاملتری بدید که چطوری از این دو سایت استفاده کنم

با تشکر

لینک به ارسال

ممنون ، ولی میشه یه توضیح کاملتری بدید که چطوری از این دو سایت استفاده کنم

با تشکر

لینک اول جهت ساخت کوئری های مطالب هستند که سبب نمایش پست ها خواهند شد!

و لینک دوم افکتی جهت عکس های مطالب شبیه به چیزی که خواستید.

الان دیگه همه چی آمادست ، فقط خلاقیت و تجربه شما رو میطلبه! :)

ویرایش شده توسط alireza.nh
لینک به ارسال

کد های نمونه رو باید با باکس های خودتون مچ کنید

کد نمونه زیر باید در فایل js فراخوانی بشه


$(document).ready(function(){

$(".slide").hover(function(){
$(this).find("div.snipit").slideDown("slow");
},function(){
$(this).find("div.snipit").slideUp("slow");
});


});

کد css هم به همین صورت فراخوانی بشه


img{
border:1px solid yellow;
margin: 14px 0 0 0;
}
div.slide {
width: 310px;
height: 230px;
float: left;
border:1px solid red;
text-align: center;
position: relative;
background: url(http://dummyimage.com/310x230) no-repeat top center;
}
div.slide div {
width: 250px;
height: 100px;
padding: 0;
display: none;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
border:1px solid red;
bottom: 14px;
left:30px;
}

و HTML


<body>
<div class="slide">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="snipit">
<h4>Image 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
</body>

لینک به ارسال

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

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

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

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

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

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

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

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

×
×
  • اضافه کردن...