رفتن به مطلب

نمایش کاور محصول


haskey

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

سلام

خسته نباشید دوستان

من میخام بخش نمایش کاور محصول مشابه وبسایت راستچین و یا ژاکت باشه

که با آوردن موس بر روی محصول کاور اون محصول و بعضی اطلاعاتش نمایش داده بشه

مشابه :

 

کد و یا هر چیز دیگه ای هست ؟ لطفا بگید

ممنون

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

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

درود.

اگه بتونید کدنویسی بخشی که با هاور به نمایش درمیاد رو انجام بدید، کار راحت میشه براتون. یعنی اول میایید یک بخش مجزا در یک DIV مخصوص طراحی می کنید که اطلاعات اضافه محصولات رو دریافت کنه، بعد اون DIV  رو با display:none مخفی می کنید. در نهایت از ویژگی hover در CSS استفاده می کنید تا بتونید بخش طراحی شده با هاور نمایش داده بشه.

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

 

برای شروع اول یک DIV بسازید و از توابع نمایش اطلاعات در اون استفاده کنید. مثال:

<div class="posthover">

<div class="hoverimg"><?php the_post_thumbnail( 'full' ); ?></div>

<div class="hoverinfo">
<span id="hoverpostname"><?php the_title(); ?></span>
<span id="hoverpostprice"><?php get_post_meta( get_the_ID(), '_regular_price', true); ?></span>
</div>

</div>

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

 

حالا باید خاصیت زیر رو به کلس مربوط به آیکن کوچک پست (تصویر شاخص کوچک) اختصاص بدید: (کد CSS)

position: relative;

 

بعد با استفاده از چند دستور دیگه در CSS این باکس جدید رو مخفی می کنیم و موقعیت مکانیش رو تنظیم می کنید و کاری می کنیم که با هاور شدن به نمایش دربیاد. در کد زیر بجای کلس post-img باید کلس مربوط به تصاویر شاخص کوچک قالبتون رو جایگزین کنید تا عملیات هاور شدن به خوبی انجام بشه:

.posthover {display:none;position: absolute;left:-50px;bottom:0px;width:400px;height:300px;}
.post-img:hover .posthover {display:block;}

الان باکس شما آمادست که با هاور شدن نمایش داده بشه. مابقی استایل ها شامل : اندازه تصویر شاخص، اندازه متن ها، رنگ پس زمینه باکس و... رو خودتون انجام بدید.

 

این روش کلی کار ما بود.

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

خیلی ممنون اقای دیندار

من از 

visibility: visible;
و
visibility: hidden;

برای hover  و حالت معمولی این باکسی که گفتم استفاده کردم

مشکلی که هست اینه که

موقع hover  شدن اون باکس کاوری که عرض کردم یه قسمتیش نمایش داده میشه بقیه قسمت ها نمایش داده نمیشه:

عکس ضمیمه شد

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

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

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

از z-index  هم استفاده کردم اما به همین منوال نمایش داده میشه

راه حلی وجود داره؟

لینک ها تنها برای اعضای سایت قابل نمایش است.

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

درود مجدد.

به نظر میرسه که DIV جدید به صورت کاور شده نمایش داده میشه.

بجای visibility از display:none و display:block استفاده کنید بهتره.

خاصیت z-index رو هم به DIV اصلی که آیکن های پست ها داخلش قرار داره بدید و هم به باکسی که با هاور شدن نمایش داده میشه. برای DIV اصلی مقدار z-index رو عدد 5 و برای باکسی که با هاور نمایش داده میشه مقدار 9999 رو تعیین کنید.

امکان داره z-index که برای باکس هاور تعیین کردید، مقدار کمتری نسبت به z-index تعریف شده برای اون DIV اصلی داشته باشه و به همین دلیل اون باکس مخفی میشه.

البته مشکل میتونه از قسمت های دیگه ی استایل باشه ، بهتره آدرس سایت رو بدید تا دقیق تر بررسی کنم

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

روی لوکال اجراش کردم

من به باکس نمایش دهنده overflow:hidden  دادم(باکسی که محصولات نمایش داده میشه )

برای همین موقع hover  اینجوری نمایش داده میشه

حالا بدون اینکه بخام overflow  ها رو تغییر بدم و height بدم به اون باکس راهی نیست روی همون باکس نمایش داده بشه؟

z-index  ها رو هم تغییر دادم اما بازم بخ همون صورت نمایش داده میشه

ممنون

 

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

متاسفانه همونطور که گفتم چند استایل دیگه وابسته به این قسمت از قالب، روی هم تاثیرگذار هستند که چنین مشکلی پیش اومده. بصورت تئوری و حدس و گمان کار سخته که بشه راه حل دقیق داد. اگه می تونستید روی هاست آنلاین نصبش کنید، سریعا میشه مشکل رو پیدا کرد.

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...