====== New Rotation Hints  ======


===== Setting GET parameters  =====

This is one the most important things to understand. As mentioned in [[New Rotation Templates#How it works]] all the ages are not static, but generated 'on-the-fly' by the same script and you get different results based on request parameters and template. For example /scj/tube/index.php?group_name=phones outputs all images from 'phones' group, and /scj/tube/index.php?group_name=cars - from groups 'cars'. But on site you can use links like /category/phones/ and /category/cars/ - thanks to mod_rewrite

In this example /scj/tube/index.php?group_name=phones - group_name=phones is a GET parameter.

What you are supposed to understand after reading this information is how to pass parameters to /scj/tube/index.php and there are few ways to do it.

**Option 1**

Direct url to /scj/tube/index.php?group_name=phones . 

**2 - rewrites**

Lets say we want to output group 'phones' using template 'super_template' , direct URL - /scj/tube/index.php?group_name=phones&force_template=super_template 

Rewrite 

  RewriteRule ^super_phones\.html$ /scj/tube/index.php?group_name=phones&force_template=super_template

and you get an URL like this - http://yourdomain/super_phones.html.

**3 - file **

The same task for /scj/tube/index.php?group_name=phones&force_template=super_template. 
Create file super_phone.php 

<code>
<?php
$_GET['group_name'] = 'phones';
$_GET['force_template'] = 'super_template';
include('./scj/tube/index.php');
</code>

and you get URL like  http://yourdomain/super_phones.php

===== Different titles =====

There are some tricks to get different titles for pages generated using the same template.

For example  'sort' : domain/category/asd/1/ctr/ and domain/category/asd/1/date/ 

<code>
<?php if ($_GET['order'] == 'ctr') {?>

<title>Site order by CTR </title>

<?php } elseif ($_GET['order'] == 'date') { ?>

<title>Site order by date </title>

<?php } else { ?>

<title>Default order (default = by ctr ) </title>

<?php } ?>

</code>


===== Rating =====

Add styles

<code>
<style>
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url(/scj/tube/delete.gif) no-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url(/scj/tube/star.gif) no-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */
</style>
</code>


Add JS script to make stars selectable 

<code>
<script src='/scj/includes/js/jquery.js' type="text/javascript"></script>
<script src='/scj/includes/js/jquery.rating.pack.js' type="text/javascript" language="javascript"></script>
<script>
$(function(){
	$('.auto-submit-star').rating({
		callback: function(value, link){
			$('#rating_div').html('Posting...');

			$.get('/scj/tube/index.php',
				{
				'content_id': '<!--GALLERY_MD5-->',
				'action': 'rating',
				'rating': value
				},
  			function(data) {
        	    $('#rating_div').html('Thank you!');
	  			}
			);
	}
	});
});
</script>
</code>



adding stars ..

<code>
<h4>Rate this movie:</h4> <div id='rating_div'>    
    <input class="auto-submit-star" type="radio" name="rating" value="1"/ <? if(<!--RATING--> > 0) echo 'checked' ?> >
    <input class="auto-submit-star" type="radio" name="rating" value="2"/ <? if(<!--RATING--> > 1) echo 'checked' ?> >
    <input class="auto-submit-star" type="radio" name="rating" value="3"/ <? if(<!--RATING--> > 2) echo 'checked' ?> >
    <input class="auto-submit-star" type="radio" name="rating" value="4"/ <? if(<!--RATING--> > 3) echo 'checked' ?> >
    <input class="auto-submit-star" type="radio" name="rating" value="5"/ <? if(<!--RATING--> > 4) echo 'checked' ?> >
</div>
</code>



That's it.


PS To output rating use <!--RATING--> - it's a number so you can show in any way you want it.

for example

<code>
<? if(<!--RATING--> > 0) echo '*' ?> 
<? if(<!--RATING--> > 1) echo '*' ?> 
<? if(<!--RATING--> > 2) echo '*' ?> 
<? if(<!--RATING--> > 3) echo '*' ?> 
<? if(<!--RATING--> > 4) echo '*' ?> 
</code>



===== Rating +1\-1 like\dislike =====

and other 2-options rating systems

Actually the trick is simple: we leave only 2 options to choose. It's gonna be 1 and 2. Lets say 1 means "dislike", and 2 - "like". So if average is 1.5 that means 50% of visitors like it. 1.75 - means 75% like, 25 dislike. It should be clear.

What to do:

Add JS script 
<code>

<script src='/scj/includes/js/jquery.js' type="text/javascript"></script> 

<script>
function post_rating(value) {

$.get('/scj/tube/index.php',
	{
	'content_id': '<!--GALLERY_MD5-->',
	'action': 'rating',
	'rating': value
	},
	function(data) {
   	    $('#rating_div').html('Thank you!');
	}
);

}

</script>
</code>

Adding vote buttons

<code>

<div id='rating_div'>
current rating = <?=(<!--RATING--> == 0) ? 'not rated' : round( (<!--RATING--> - 1) * 100 ) . '%'?> <br>
rate it: 

<span onclick='post_rating(2)' style="cursor: pointer"> +1 </span> ............................
<span onclick='post_rating(1)' style="cursor: pointer"> -1 </span>

</div>

+1 and  -1 can be replaced with whatever you want.

</code>


That's it )


===== Rotating thumbs of a gallery  =====

Thumbs rolling is when we have lets say 5 thumbs from the same gallery and when you hover mouse cursor over a thumb it starts to show the rest of those 5 thumbs. Take a look at demo here [[http://demo.smartcj.com/cat/14/7%20Demo2%20%20Taylor/ctr/1/content_list_pic/image/|example]])  and [[http://demo.smartcj.com/cat/14/7%20Demo2%20%20Taylor/ctr/1/content_list_mov/movie/|example 2]].

How to do it
  * add JS code into your template , it rotates thumbs with id starting with 'rot_'
<code>

<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];
	}

    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>

</code>

  * adding rot_ id to thumbs (changing subtemplate)
<code>

<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> 
</code>

notice 2 points here
<code>
id='rot<!--ID-->' - script rotates only those thumbs that has id starting with 'rot'
rel="<!--ALL_THUMBS-->" - here script enumerates all available thumbs for this gallery
</code>


===== Internationalization ( i18 ) =====

it's pretty easy to translate site's menu (links like Most popular, Longest Videos and so on) into different languages.

1. Create custom template 'languages' with set of words like

<code>
<?php 
$my_keywords['en'] = array(
  'most_popular' => 'Most popular',
  'order_by_date' => 'Order By Date',
  and so on
);

$my_keywords['es'] = array(
  'most_popular' => 'Lo más leído',
  'order_by_date' => 'Ordenar por Fecha',
  and so on
);


$my_keywords['de'] = array(
  'most_popular' => 'Populärste',
  'order_by_date' => 'Sortiert nach Datum',
  and so on
);

and so on as many languages as you want.

Now you have 2 options to setup language for each user

using browser language

if (strstr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 'es')) {
  $lang = $my_keywords['es'];
} elseif (strstr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 'de')) {
  $lang = $my_keywords['de'];
} else $lang = $my_keywords['en'];

or geo_ip

if ($_SERVER['GEOIP_COUNTRY_CODE'] =='SP') {
  $lang = $my_keywords['es'];
} elseif ($_SERVER['GEOIP_COUNTRY_CODE'] =='DE') {
  $lang = $my_keywords['de'];
} else $lang = $my_keywords['en'];


Hopefully those examples are pretty self explaining 

at the ens of template you can add a cookie

if ($_GET['set_lng'] and isset($my_keywords[$_GET['set_lng']])) {
  setcookie('force_lng', $_GET['set_lng'], time() + 86400);
  $lang = $my_keywords['en'];
} elseif ($_COOKIE['force_lng'] and isset($my_keywords[$_COOKIE['force_lng']])){
  $lang = $my_keywords[$_COOKIE['force_lng']];
}

That's it for this template
</code>

2. Now you have to include this template into each template where you are going to use those words

<code>
<!--INCLUDE_TEMPLATE_languages-->
</code>


3. and replace words in templates with variables
<code>
Most popular ->  <?=$lang['most_popular']?>
Order By Date -> <?=$lang['order_by_date']?>
and so on
</code>

From this point it should work as it supposed to.

4. Now we want to add an ability for user to force switch to a selected language 

<code>
add a link like 

http://domain/?force_lng=de (and so on any language based on your language array $my_keywords['de'])

</code>


That's it.