This is an old revision of the document!
Table of Contents
New Rotation Hints
Setting GET parameters
This is one the most important things to understand. As mentioned in 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
<?php
$_GET['group_name'] = 'phones';
$_GET['force_template'] = 'super_template';
include('./scj/tube/index.php');
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/
<?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 } ?>
Rating
Add styles
<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>
Add JS script to make stars selectable
<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>
adding stars ..
<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>
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
<? if(<!--RATING--> > 0) echo '*' ?> <? if(<!--RATING--> > 1) echo '*' ?> <? if(<!--RATING--> > 2) echo '*' ?> <? if(<!--RATING--> > 3) echo '*' ?> <? if(<!--RATING--> > 4) echo '*' ?>
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
<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>
Adding vote buttons
<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.
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 example) and example 2.
How to do it
- add JS code into your template , it rotates thumbs with id starting with 'rot_'
<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>
- adding rot_ id to thumbs (changing subtemplate)
<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>
notice 2 points here
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
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
<?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
2. Now you have to include this template into each template where you are going to use those words
<!--INCLUDE_TEMPLATE_languages-->
3. and replace words in templates with variables
Most popular -> <?=$lang['most_popular']?> Order By Date -> <?=$lang['order_by_date']?> and so on
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
add a link like http://domain/?force_lng=de (and so on any language based on your language array $my_keywords['de'])
That's it.
Comments
Adding AJAX code to add comments
<script src='/scj/includes/js/jquery.js' type="text/javascript"></script> ---- don't use this string twice
<script>
function post_comment() {
$.post(
'/scj/tube/',
{
'action': 'add_comment',
'content_id': '<!--GALLERY_ID-->',
'captcha': $('#captcha').val(),
'username': $('#username').val(),
'comment': $('#comment').val()
},
function(data) {
var t = data.split('|');
if (t[0] == 'ERROR') {
$('#comment_error').text(t[1]);
} else {
$('#comment_error').text(' ');
$('#add_comment').html('Thank you ! Your comment will be reviewed by admin.');
}
}
);
}
</script>
Add html form
<div id='comment_error'></div>
<div id='add_comment'>
<div class="clear"></div>
<h4>Add comment</h4>
<FORM name="add_comment" method="POST">
<div class="r_line">
<label>Name:</label> <input class="s_input" type="text" name='username' id='username' value="<?=$user['username']?>">
</div>
<div class="r_line">
<label>Comment:</label> <textarea class="s_text" class="ph2" name='comment' id='comment' rows=5 cols=35 value="Leave Your Comments Here"></textarea>
</div>
<? if ($rot_settings['tube_comment_captcha']) { ?>
<div class="r_line">
<label>Captcha:</label><div class="clear"></div><img src="/scj/tube/captcha.php" id="captcha_img" width="158" height="60" alt="Visual CAPTCHA" />
<input id='captcha' class="s_input" type="text" name='captcha' value="" />
</div>
<div class="r_line">
<input type='button' value='Post Comment' onClick='post_comment();'>
</div>
<? } ?>
</div>
</form>
and output existing comments
<!--TOTAL_COMMENTS--> <comments num=1-10> <!--DATE--> <!--USERNAME--> : <!--COMMENT--> </comments>
That's it. Note that comment moderation available for paid versions only.
Thumb rolling
Let's say you have 5 thumbs for each gallery, usually rotation engine tries to find the best one among them, but you can also “roll” those thumbs with mouseover ie thumbs will replace it other while mover cursor is over it.
How to do it
- Add some JS some that add rolling for all thumbs with швы starting with 'rot'
<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>
- add id='rot..' for all thubms in subtemplate like
<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>
That's it.
Note. there are 2 points you have to understand
id='rot<!--ID-->' - JS tries to roll there thumbs only rel="<!--ALL_THUMBS-->" - here script outputs all available thumbs for this gallery
PS feel free to modify this code
Hide rotation parameter
A regular link looks like
/gallery/cool_gallery/index.html?12x34x56
where 12x34x56 - is rotation parameter. It this a way for the script to understand what thumb has been clicked, at what page and so on. You can hide it from surfer, here's how to do it
1. In subtemplate you have something like
<a href="/gallery/<!--GALLERY_SLUG-->/index.html?<!--THUMB_LINK-->"> <img ...> </a> replace it by <a href="/gallery/<!--GALLERY_SLUG-->/index.html" rot_id='<!--THUMB_LINK-->'> <img ...> </a>
not that <!–THUMB_LINK–> has been moved to rot_id
2. add some JS code to <head> section of your template
<script type="text/javascript" src="/scj/includes/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[rot_id]').each(function(){
$(this).bind('click', function(){
if ($(this).attr('href').indexOf('?') == -1) $(this).attr('href', $(this).attr('href')+ '?' + $(this).attr('rot_id'));
});
});
});
</script>
And that's it. it will add the parameter on click only, so surfer won't see it on 'mouseover'.
How to change links /gallery/cool/index.html?123x45x678
For version 1.X only
If you'd like to change links like /gallery to let's say /video - edit rewrites and templates.
if you'd like to change rotation parameter (?123x45x678 part) there are some options
1. Если не нравится, что это видит серфер - check 'hide Rotation Params' at this page
2. For SEO purposes - http://smartcj.com/wiki/doku.php?id=custom_galleries_and_google
3. For google (another option) - make likes like
/gallery/cool/index.html?link=images/123x45x678
and in Google webmaster's tools (GWT) set &linkk parameter as 'not important'
In this case you should also change .htaccess
out.php?link=images/%{QUERY_STRING}
should be replaced by
out.php?%{QUERY_STRING}
for all occurrences
and template like
http://domain/gallery/<!--GALLERY_SLUG-->/index.html?link=images/<!--THUMB_LINK-->
Options 2 for rotation parameter
if you'd like to have something not '&link='
in rewrites change
RewriteCond %{QUERY_STRING} ^(.+)$
RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%{QUERY_STRING}&url=content&slug=$1 [L]
to
RewriteCond %{QUERY_STRING} ^param=(.+)$
RewriteRule ^gallery/([^/]+)/index.html$ /scj/cgi/out.php?link=images/%1&url=content&slug=$1 [L]
You can see 'param' here. So this is a way to use another word instead of 'link'
Don't forget about links
href="/gallery/<!--GALLERY_SLUG-->/index.html?param=<!--THUMB_LINK-->
**Option 3 if you want completely another style **
Tag <!–THUMB_LINK–> outputs something like '12x34x56', you can change it into something like &a=12&b=34&c=56 or &ppp=12.34.56 and so on, actually any thing.
Here's an example:
subtemplate
$my_var = explode('x', '<!--THUMB_LINK-->');
in $my_var you'll get in array like
Array
(
[0] => 12
[1] => 34
[2] => 56
)
now you can create 'your style' link
an example with acb
out.php?url=....&a=<?=$my_var[0]?>&b=<?=$my_var[1]?>&c=<?=$my_var[2]?>
then in common.php you have to assemble it back into a normal format, so script can understand it.
if (isset($_GET['a'])) {
$_GET['link'] = 'images/' . $_GET['a'] . 'x' . $_GET['b'] . 'x' . $_GET['c'];
}
This way you can have any links you want.
Quick Pagination
Basic pagination looks like
<navigation> <li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--PAGE_NUM-->/" title="<!--PAGE_NUM-->"><!--PAGE_NUM--></a></li> </navigation>
But if you have a big DB it takes time to calculate how much galleries you actually have in particular category, and at the same time user doesn't care if you have 122123 videos or 123344. You can actually type any numbers in you templates.
So here's what we can do to save some resources of your server: we don't count total results and output just a link to the next page.
So if there's no <navigation> tag - the script doesn't count totals and we can use links like
<?php if ('<!--PREV_PAGE-->') { ?>
<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--PREV_PAGE-->/" title="<!--PREV_PAGE-->"><!--PREV_PAGE--></a></li>
<?php } ?>
<?php if ('<!--NEXT_PAGE-->') { ?>
<li><a href="/category/<!--CATEGORY_ID-->/<!--CATEGORY_NAME-->/<!--SORT_ORDER-->/<!--NEXT_PAGE-->/" title="<!--NEXT_PAGE-->"><!--NEXT_PAGE--></a></li>
<?php } ?>
Note, that in this case we also don't have TOTAL_ITEMS (actually it will output amount of galleries on the current page)