نسـتـــرن

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

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

سلام

دوستان این کده اچ تی ام ال اسلایدر ضمیمه شده هست:

البته خودم خلاصه اش کردم:


<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an image gallery with a Polaroid look.
We will have albums that will expand to sets of slightly rotated thumbnails
that pop out on hover.</p>
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
</div>
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full page image gallery with some jQuery</p>
</div>
</div>
<div class="cn_page">
<div class="cn_item">
<h2>Music Portfolio Template</h2>
<p>A template for a music portfolio website with an HTML5 audio player</p>
</div>
<div class="cn_item">
<h2>Related Posts Slide Out Boxes</h2>
<p>Show users more of your articles with these slide out boxes</p>
</div>
<div class="cn_item">
<h2>Latest Tweets Tooltip with jQuery</h2>
<p>A Plugin for showing the latest tweets with a certain word in your article</p>
</div>
<div class="cn_item">
<h2>Slide Down Box Menu with jQuery and CSS3</h2>
<p>A menu with a nice effect</p>
</div>
</div>
<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>

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


<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>

تو اون h2 عنوان رو نشون بده،تو p خلاصه مطلب رو.

و از کد زیر هم :


<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an image gallery with a Polaroid look.
We will have albums that will expand to sets of slightly rotated thumbnails
that pop out on hover.</p>
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a>
</div>

آدرس img src بشه تصاویر شاخص مطالب جدید

h1 بشه عنوانش

اون تاریخ ها و دسته بندی ها هم برای هر مطلب عوض شه و p هم باز خلاصه

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

دموی اصلی:

http://www.htmldrive.net/items/demo/656/jQuery-scroll-News-Previewer

0

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


لینک به پست

میخواین وردپرسی کنید؟

1

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


لینک به پست

بله.

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط unid_user
      درود
      من در یک وب سایت به یک اسلایدر خیلی عجیب برخورد کردم. کدهاش بصورت زیر هستن. چطور میشه این مدل اسلایدر رو داینامیک کرد؟
      <div class="slider"> <div class="fluid_container"> <div class="camera_wrap camera_azure_skin" id="camera_wrap_1" style="margin-bottom:15px"> <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-4.jpg"> </div> <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-3.jpg"> </div> <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-1.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-1.jpg"> </div> <div data-thumb="<?php echo get_template_directory_uri(); ?>/images/thumbnails/slider-2.jpg" data-src="<?php echo get_template_directory_uri(); ?>/images/slider-2.jpg"> </div> </div> </div> <div class="clear"></div> </div>  
    • توسط j1989m
      سلام 

      یه اسلایدر ریسپانسیو و تاچ میخوام که عناصر داخل هریک از اسلایدها با انیمیشن ظاهر و ناپدید بشن 
      (شبیه اسلایدر این سایت : https://payment24.ir/ ولی خب این تاچ نیست و با بوت استرپه) 

      ببینید مثلا اسلایدر زیر رو با owl carousel ساختم و میخوام با نمایش اسلایدها title و description با انیمیشن دلخواه خودم نمایش و ناپدید بشن: 

      https://codepen.io/j1989mah/pen/VzoOmY 

      با رویدادهای owl carousel میشه اینکارو کرد؟ کسی با ایونت های کاروسل کار کرده؟ 
      https:/owlcarousel2.github.ioOwlCarousel2docs/api-events.html 
    • توسط unid_user
      سلام دوستان
      من میخوام که یه اسلایدر با post type در وردپرس ایجاد کنم. قبلا اینکار و برای اسلایدر صفحه اصلی سایتم انجام دادم ولی میخوام هربار و هرکجا خواستم یه اسلایدر ایجاد کنم و بدون نیاز به دست بردن در کدنویسی قالب بتونم مثلا با شورت کد short code اسلایدرهای مختلف رو به پست ها و مطالبم اضافه کنم.
      اگه منبعی هم سراغ دارید ممنون میشم فارسی یا انگلیسی راستش خودم نمیدونم باید چی و توی اینترنت سرچ کنم!؟
      ممنون.
    • توسط a_a_ze
      سلام دوستان در نمایش اخبار سایت به صورت اسلایدر حرکت اسلایدر به طرفین اشتباه است و به جای اینکه به سمت چپ برود و ادامه اخبار نشان دهد به سمت راست میرود و صفحه سفید نمایش می دهد.
      لینک سایت: https://moeidedu.ir/#news
    • توسط vahidmh
      سلام به همگی خسته نباشید بنده یک افزونه اسلایدر مخصوص سایتم میخواستم تا الان چندتا افزونه استفاده کردم ولی همشونو خراب نشون داده لطفا کمک کنید
      آدرس سایتم : beh-melody.ir
      لطف کنید بررسی کنید ببینید چجور هستش ممنون