SmartCJ Wiki

User Tools

Site Tools

Trace:
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]
 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)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki