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
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 } ?>
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 '*' ?>
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 )
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
<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>
<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
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.