رفتن به مطلب

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


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

یه اسلایدر میخوام تو مایه های اسلایدر زیر که هم قسمت عنوان و خلاصه مطلب داشته باشه لینک دانلودش رو بزارید ممنون. HTML CSS باشه اگر JQUERY هم داشته باشه مشکلی نداره فقط شبیه این باشه.

oeagmv9kak2kam752ow9.jpg

لینک به ارسال

سلام

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

اگه منظورتون حالت نمایش عنوان و توضیحات هست، اون رو خودتون راحت می‌تونید مشخص کنید

یه نمونه اسلایدر ساده

لینک به ارسال

سلام

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

اگه منظورتون حالت نمایش عنوان و توضیحات هست، اون رو خودتون راحت می‌تونید مشخص کنید

یه نمونه اسلایدر ساده

طبق این آموزش من جلو رفتم.

این کدها رو در header.php گذاشتم. البته قابلیت caption هم اضافه کردم که jquery.cycle2.caption2.min.js رو هم فراخوانی کردم.


<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include Cycle2 -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.cycle2.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.cycle2.caption2.min.js"></script>

این کدها رو هم در فایل index.php قسمت اسلایدر گذاشتم:


<div class="cycle-slideshow" data-cycle-fx=scrollHorz data-cycle-caption-plugin=caption2>
<div class="cycle-caption"></div>
<div class="cycle-overlay"></div>
<img src="<?php bloginfo('template_url'); ?>/images/slide/1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
<img src="<?php bloginfo('template_url'); ?>/images/slide/2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
<img src="<?php bloginfo('template_url'); ?>/images/slide/3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay">
<img src="<?php bloginfo('template_url'); ?>/images/slide/4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

اما در خروجی. اسلایدها نمایش داده میشن ولی Height استایل اسلایدر 600px فکر کنم در نظر گرفته شده من استایلی ندادم بهش و caption در پایین نمایش داده میشه این رو چجوری تغییر بدم؟

عکس زیر رو ببینید:

ebxvvfmnhoylwm3tltt9.jpg

ویرایش شده توسط Masrour
لینک به ارسال

من یه اسلایدر بهتر از این پیدا کردم. jquery هم نداره سبک هم هست.

فقط یه مشکل دارم:

این اسلایدر در حالت دیفالت 5 تا اسلاید داره. هر <li> یه ID و class داره به صورت زیر:


<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Title 01</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/slide/2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Title 02</h1>
</div>
</li>

<li id="third" class="thirdanimation">
<a href="#">
<img src="images/slide/3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Title 03</h1>
</div>
</li>

<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/slide/4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Title 04</h1>
</div>
</li>

<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/slide/5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Title 05</h1>
</div>
</li>

من این کوئری زیر رو میزنم ولی قسمت <li> چی باید نوشته بشه؟


<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>

<li id="first" class="firstanimation">
<a href="<?php the_permalink() ?>">
<img src="<?php the_post_thumbnail('thumb-size3'); ?>" alt="Cougar"/>
</a>
<div class="tooltip">
<h1><?php the_title(); ?></h1>
</div>
</li>

ولی این اشتباهه چون باید به ترتیب ID هاشون و Class های متفاوتشون بیاد و چجوری باید کدشو بنویسیم؟

باید اولی با <li id="first" class="firstanimation"> و دومی با <li id="second" class="secondanimation"> و ...

اسلایدر رو کلا سورسشو بزارم میتونه کسی برام کامل درستش کنه به وردپرس؟

ویرایش شده توسط Masrour
لینک به ارسال

سلام

به نظرم افزونه جی کوئری bxslider دقیقا چیزی هست که میخایین

http://bxslider.com/examples/image-slideshow-captions

لینک به ارسال

سلام

به نظرم افزونه جی کوئری bxslider دقیقا چیزی هست که میخایین

http://bxslider.com/...deshow-captions

اینی که در زیر پیوست کردم رو نمیتونید درست کنید؟ افزونه نمیخوام. میخوام سفارشی خودم بسازم با HTML CSS و اینکه دستی اسلاید ها با کلیک عوض نشن aUTO PLAYY باشه اینی که گذاشتم این قابلیتو داره ووولی یه جاش مشکل دارم که یه پست بالاتر توضیح دادم فایل اسلایدر رو پیوست میکنم

CSS3-Slider.zip

ویرایش شده توسط Masrour
لینک به ارسال
  • 3 هفته بعد...

یه اسلایدر میخوام تو مایه های اسلایدر زیر که هم قسمت عنوان و خلاصه مطلب داشته باشه لینک دانلودش رو بزارید ممنون. HTML CSS باشه اگر JQUERY هم داشته باشه مشکلی نداره فقط شبیه این باشه.

از نرم افزار Amazing Slider استفاده کنید که خیلی مناسبه

ابزارهای کامل برای ساخت و مدیریت اسلایدر جی کوئری با اشکال مختلف رو داره و قابلیت ریسپانسیو کردن و تولید خروجی بصورت افزونه وردپرس و جوملا رو هم داره

لینک به ارسال

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

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

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

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

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

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

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

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

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