User Tools

Site Tools


ru:rotation_dual_demo_content_list_pic

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

ru:rotation_dual_demo_content_list_pic [2014/01/29 18:19] (current)
Line 1: Line 1:
 +Subtemplate
 +<​code>​
  
 +<​li><​h3><​a href="/​gallery/<​!--SAFE_DESC-->/<​!--GALLERY_ID-->/​index.html?<​!--THUMB_LINK-->"><​!--ALT--></​a></​h3>​
 +<a href="/​gallery/<​!--SAFE_DESC-->/<​!--GALLERY_ID-->/​index.html?<​!--THUMB_LINK-->"​ title="<​!--ALT-->"><​img id='​rot<​!--ID-->'​ src="<​!--THUMB_URL-->"​ class="​t_img"​ alt=""​ rel="<​!--ALL_THUMBS-->"​ /></​a> ​
 +<​p><​span class="​added"><​i>​Added:</​i>​ <​!--ACTIVATION_DATE--></​span>​ <span class="​views"></​span></​p> ​
 +</li>
 +
 +</​code>​
 +
 +Template
 +
 +<​code>​
 +<​style>​
 +
 +.thumbs {width:​100%;​ margin:0 auto 25px; overflow:​hidden;​ }
 +.thumbs h3 {color:#​CCCC99;​font-weight:​bold;​ font-size:​13px;​width:​95%;​ margin:0 auto; padding:3px 0; text-align:​left;​ text-align:​center;​ height:​18px;​ overflow:​hidden;​ line-height:​21px;​}
 +.thumbs h2 {color:#​CCCC99;​font-weight:​bold;​ font-size:​16px;​width:​95%;​ margin:0 auto; padding:3px 0; text-align:​center;​ height:​20px;​ overflow:​hidden;​line-height:​21px;​}
 +.thumbs li {background:#​f0f3ee;​padding:​0;​width:​ 137px; height:​202px;​ float:left; margin:​4px;​_margin:​3px 4px 4px 3px;}
 +.t_img {width:​135px;​ height:​180px;​ border:1px solid #c0c8b9; display:​block;​background:#​dce1d7;​}
 +
 +</​style>​
 +
 +<script src='/​scj/​includes/​js/​jquery.js'></​script>​
 +
 +<​script>​
 +$(document).ready(function() {
 +
 + $("​img[id^=rot]"​).bind('​mouseenter',​ function() {
 + $(this).attr('​rotating',​ 1);
 + StartSlide($(this).attr('​id'​));​
 + }).mouseleave(function() {
 + $(this).attr('​rotating',​ 0);
 +        if ($(this).attr('​original_src'​)) $(this).attr('​src',​ $(this).attr('​original_src'​));​
 + });
 +
 +});
 +
 +
 +function StartSlide(id) {
 + if (!$('#'​ + id).attr('​rotating'​) || $('#'​ + id).attr('​rotating'​) == 0) return false;
 +
 +    if (!$('#'​ + id).attr('​original_src'​)) $('#'​ + id).attr('​original_src',​ $('#'​ + id).attr('​src'​));​
 +
 + var images = $('#'​ + id).attr('​original_src'​) + ','​ + $('#'​ + id).attr('​rel'​);​
 +    images = images.split(','​);​
 +    var cur = $('#'​ + id).attr('​current_img'​);​
 +
 +    cur = parseInt(cur);​
 +    cur = (!cur || cur == 0) ? 1 : (cur+1);
 +
 +    cur = (!images[cur]) ? 0 : cur;
 +    $('#'​ + id).attr('​current_img',​ cur);
 +
 +  var preload = new Image();
 +
 + if (cur == 0) {
 + preload.src = $('#'​ + id).attr('​original_src'​);​
 + } else {
 + preload.src = images[cur];​
 + }
 +
 +    $('#​debug'​).append($('#'​ + id).attr('​current_img'​) + '​...'​ + $('#'​ + id).attr('​rotating'​) + '<​br>'​);​
 +    if ($('#'​ + id).attr('​rotating'​)) setTimeout("​ChangeSRC('"​+id+"',​ '"​+preload.src+"'​)",​ 700);
 +
 +}
 +
 +function ChangeSRC(id,​ src) {
 + if (!$('#'​ + id).attr('​rotating'​) || $('#'​ + id).attr('​rotating'​) == 0) return false;
 + $('#'​ + id).attr('​src',​ src);
 +    StartSlide(id);​
 +}
 +</​script>​
 +
 +
 +
 +
 +<​!--=========CONTENT=========-->​
 +<​h2>​Shows only IMAGE content from this category (<​!--CATEGORY_NAME-->​)<​br>​
 +<a href='/​dual/'>​Back to index</​a> ​
 +</​h2><​br>​
 +
 +<div id="​content">​
 +
 +<div class="​name">​
 + <​h2><​!--CATEGORY_NAME-->​ <em>[ Total <​!--TOTAL_ITEMS-->​ galleries]</​em></​h2>​
 + <div class="​paginator_top">​
 + Pages: ​
 +<ul class="​pages">​
 +<​navigation>​
 +<​li><​a href="/​cat/<​!--CATEGORY_ID-->/<​!--CATEGORY_NAME-->/<​!--SORT_ORDER-->/<​!--PAGE_NUM-->/<​!--FORCE_TEMPLATE-->/<​!--CONTENT_TYPE-->/"​ title="<​!--PAGE_NUM-->"><​!--PAGE_NUM--></​a></​li>​
 +</​navigation>​
 +</ul>
 +
 +Order by:
 +<ul>
 +<​li><​a href="/​cat/<​!--CATEGORY_ID-->/<​!--CATEGORY_NAME-->/​ctr/​1/<​!--FORCE_TEMPLATE-->/<​!--CONTENT_TYPE-->/"​ title="#">​Popular</​a></​li>​
 +<​li><​a href="/​cat/<​!--CATEGORY_ID-->/<​!--CATEGORY_NAME-->/​date/​1/<​!--FORCE_TEMPLATE-->/<​!--CONTENT_TYPE-->/"​ title="#">​Date</​a></​li>​
 +<​li><​a href="/​cat/<​!--CATEGORY_ID-->/<​!--CATEGORY_NAME-->/​duration/​1/<​!--FORCE_TEMPLATE-->/<​!--CONTENT_TYPE-->/"​ title="#">​Duration</​a></​li>​
 +</ul>
 +   </​div>​
 +</​div>​
 +
 +
 +<ul class="​thumbs cats">​
 +
 +<​!--default_1-12-->​
 +<br>
 +<br>
 +<div class="​clear"></​div>​
 +<br>
 +<br>
 +<​!--CATEGORY_CUSTOM_VAR1-->​
 +<br>
 +<​!--default_13-24-->​
 +<br>
 +<br>
 +<div class="​clear"></​div>​
 +<br>
 +<br>
 +<​!--CATEGORY_CUSTOM_VAR2-->​
 +<br>
 +<br>
 +<div class="​clear"></​div>​
 +<br>
 +<br>
 +<​!--default_25-36-->​
 +<br>
 +<br>
 +<div class="​clear"></​div>​
 +<br>
 +<br>
 +<​!--CATEGORY_CUSTOM_VAR3-->​
 +<br>
 +<br>
 +<div class="​clear"></​div>​
 +<br>
 +<br>
 +<​!--default_37-48-->​
 +
 +</ul>
 +
 +
 +
 +
 +<div class="​tops">​
 + <​ul>​
 + <​li>​01. <a href="#">​TopList Site 1</​a></​li>​
 + <​li>​02. <a href="#">​TopList Site 2</​a></​li>​
 + <​li>​03. <a href="#">​TopList Site 3</​a></​li>​
 + <​li>​04. <a href="#">​TopList Site 4</​a></​li>​
 + <​li>​05. <a href="#">​TopList Site 5</​a></​li>​
 + <​li>​06. <a href="#">​TopList Site 6</​a></​li>​
 + <​li>​07. <a href="#">​TopList Site 7</​a></​li>​
 + <​li>​08. <a href="#">​TopList Site 8</​a></​li>​
 + <​li>​09. <a href="#">​TopList Site 9</​a></​li>​
 + <​li>​10. <a href="#">​TopList Site 10</​a></​li>​
 + </​ul>​
 +
 +<ul>
 + <​li>​01. <a href="#">​TopList Site 1</​a></​li>​
 + <​li>​02. <a href="#">​TopList Site 2</​a></​li>​
 + <​li>​03. <a href="#">​TopList Site 3</​a></​li>​
 + <​li>​04. <a href="#">​TopList Site 4</​a></​li>​
 + <​li>​05. <a href="#">​TopList Site 5</​a></​li>​
 + <​li>​06. <a href="#">​TopList Site 6</​a></​li>​
 + <​li>​07. <a href="#">​TopList Site 7</​a></​li>​
 + <​li>​08. <a href="#">​TopList Site 8</​a></​li>​
 + <​li>​09. <a href="#">​TopList Site 9</​a></​li>​
 + <​li>​10. <a href="#">​TopList Site 10</​a></​li>​
 + </​ul>​
 +
 + <ul>
 + <​li>​01. <a href="#">​TopList Site 1</​a></​li>​
 + <​li>​02. <a href="#">​TopList Site 2</​a></​li>​
 + <​li>​03. <a href="#">​TopList Site 3</​a></​li>​
 + <​li>​04. <a href="#">​TopList Site 4</​a></​li>​
 + <​li>​05. <a href="#">​TopList Site 5</​a></​li>​
 + <​li>​06. <a href="#">​TopList Site 6</​a></​li>​
 + <​li>​07. <a href="#">​TopList Site 7</​a></​li>​
 + <​li>​08. <a href="#">​TopList Site 8</​a></​li>​
 + <​li>​09. <a href="#">​TopList Site 9</​a></​li>​
 + <​li>​10. <a href="#">​TopList Site 10</​a></​li>​
 + </​ul>​
 + <ul>
 + <​li>​01. <a href="#">​TopList Site 1</​a></​li>​
 + <​li>​02. <a href="#">​TopList Site 2</​a></​li>​
 + <​li>​03. <a href="#">​TopList Site 3</​a></​li>​
 + <​li>​04. <a href="#">​TopList Site 4</​a></​li>​
 + <​li>​05. <a href="#">​TopList Site 5</​a></​li>​
 + <​li>​06. <a href="#">​TopList Site 6</​a></​li>​
 + <​li>​07. <a href="#">​TopList Site 7</​a></​li>​
 + <​li>​08. <a href="#">​TopList Site 8</​a></​li>​
 + <​li>​09. <a href="#">​TopList Site 9</​a></​li>​
 + <​li>​10. <a href="#">​TopList Site 10</​a></​li>​
 + </​ul>​
 +
 +</​div>​
 +
 +
 +
 +
 +
 +</​div>​
 +<​!--=========END=========CONTENT=========-->​
 +
 +
 +</​code>​
ru/rotation_dual_demo_content_list_pic.txt ยท Last modified: 2014/01/29 18:19 (external edit)