سلام بر دوستان بزرگوار
اینوی کی از دوستان راهنمایی کرد در باره همون سایتی که مد نظرم بود
نتونستم کد مربوطه رو پیدا کنمبا مرورگر کروم سایت رو باز کنین روی اون بخش کلیک راست کنین گذینه inspect element رو بزنین و کد هاشو بردارین بعد فایل های css و js مربوط به اون روبردارید
یه عزیز دیگه اینو برام گذاشت
از اون جا خیلی مخم ! بدون درک کردن مطالب ،همه رو کپی کردم و بردم توی وبلاگ خودم جاسازی کردم ببینم اصلا جواب میده یا خیر ؟ که با در بسته رو برو شدم<!-- DEMO I. --> <div id="example1" class="showbiz-container">
<!-- THE NAVIGATION --> <div class="showbiz-navigation center sb-nav-grey"> <a id="showbiz_left_1" class="sb-navigation-left"><i class="sb-icon-left-open"></i></a> <a id="showbiz_play_1" class="sb-navigation-play"><i class="sb-icon-play sb-playbutton"></i><i class="sb-icon-pause sb-pausebutton"></i></a> <a id="showbiz_right_1" class="sb-navigation-right"><i class="sb-icon-right-open"></i></a> <div class="sbclear"></div>
</div> <!-- END OF THE NAVIGATION -->
<div class="divide20"></div>
<!-- THE PORTFOLIO ENTRIES --> <div class="showbiz" data-left="#showbiz_left_1" data-right="#showbiz_right_1" data-play="#showbiz_play_1">
<!-- THE OVERFLOW HOLDER CONTAINER, DONT REMOVE IT !! --> <div class="overflowholder"> <!-- LIST OF THE ENTRIES --> <ul>
<!-- AN ENTRY HERE , WITH PREDEFINED GREY SKIN--> <li class="sb-grey-skin">
<!-- THE MEDIAHOLDER CONTAINER --> <div class="mediaholder"> <!-- THE INNER WRAP FOR MEDIA HOLDER --> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/shutterstock_76307515.jpg">
<!-- THE HOVER CONTAINER AND THE HOVER ICONS --> <div class="hovercover" > <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/shutterstock_76307515.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div><!-- END OF HOVER CONTIANER -->
</div><!-- END OF MEDIAHOLDER INNER WRAP--> </div><!-- END OF MEDIAHOLDER CONTAINER -->
<!-- THE VISIBLE DETAILS --> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item One</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div><!-- END OF VISIBLE DETAILS --> </li><!-- END OF ENTRY -->
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <a href="#"><img alt="" src="images/entries/shutterstock_66242737.jpg"></a> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon"><i class="sb-icon-link"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Two</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/shutterstock_47799625.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a class="fancybox" rel="group" href="images/entries/shutterstock_47799625.jpg"><div class="lupeicon"><i class="sb-icon-search"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Three</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/Fotolia_2923012_S.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/Fotolia_2923012_S.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Four</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/shutterstock_76307515.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/shutterstock_76307515.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div> </div> </div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Five</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/shutterstock_66242737.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/shutterstock_66242737.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Six</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/shutterstock_47799625.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/shutterstock_47799625.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Seven</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
<!-- AN ENTRY HERE --> <li class="sb-grey-skin"> <div class="mediaholder "> <div class="mediaholder_innerwrap"> <img alt="" src="images/entries/Fotolia_2923012_S.jpg"> <div class="hovercover" data-maxopacity="0.85"> <a href="#"><div class="linkicon notalone"><i class="sb-icon-link"></i></div></a> <a class="fancybox" rel="group" href="images/entries/Fotolia_2923012_S.jpg"><div class="lupeicon notalone"><i class="sb-icon-search"></i></div></a> </div> </div>
</div> <div class="detailholder"> <div class="divide15"></div> <h4 class="showbiz-title txt- center "><a href="#">Teaser Item Eight</a></h4> <div class="divide5"></div> <p class="txt- center ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p> </div> </li>
</ul> <div class="sbclear"></div> </div> <!-- END OF OVERFLOWHOLDER --> <div class="sbclear"></div> </div> </div><!-- END OF DEMO I. -->
حالا بزرگواری هست امداد غیبی برسونه ؟
علاقه مندی ها (Bookmarks)