Masrour

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

7 پست در این موضوع قرار دارد

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

oeagmv9kak2kam752ow9.jpg

0

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


لینک به پست

سلام

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

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

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

0

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


لینک به پست

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

سلام

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

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

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

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

این کدها رو در 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
0

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


لینک به پست

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

من یه اسلایدر بهتر از این پیدا کردم. 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
0

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


لینک به پست

سلام

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

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

0

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


لینک به پست

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

سلام

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

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

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

CSS3-Slider.zip

ویرایش شده در توسط Masrour
0

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


لینک به پست

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

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

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

0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری