Rating stars on the pop up Rating stars on the pop up
 

News:

CPG Release 1.6.27
change DB IP storage fields to accommodate IPv6 addresses
remove use of E_STRICT (PHP 8.4 deprecated)
update README to reflect new website
align code with new .com CPG website
correct deprecation in captcha

Main Menu

Rating stars on the pop up

Started by allvip, September 04, 2015, 09:26:16 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

allvip

I want to place the displayimage.php rating stars on the pop up image.
Thanks.

Αndré

With "pop up image" you mean the full-sized view?

allvip


Αndré

This seems to be more complicated than I initially thought. I added the following code to the function "theme_display_fullsize_pic", right after the globals:
    global $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA;

    $result = cpg_db_query("SELECT title, comments, votes, category, aid FROM {$CONFIG['TABLE_ALBUMS']} WHERE aid='{$CURRENT_PIC_DATA['aid']}' LIMIT 1");

    if (!mysql_num_rows($result)) {
        cpg_die(CRITICAL_ERROR, sprintf($lang_errors['pic_in_invalid_album'], $CURRENT_PIC_DATA['aid']), __FILE__, __LINE__);
    }

    $CURRENT_ALBUM_DATA = mysql_fetch_assoc($result);
    mysql_free_result($result);

    $votes = theme_html_rating_box();



Additionally, I added
script type="text/javascript" src="js/displayimage.js"></script>
to the HTML head.


Currently, the JavaScript part fails, as the js_vars array is missing. It's probably a good idea to copy the rating part out of displayimage.js to a new js file and include this instead of displayimage.js, but I've currently no time to check this.

allvip

Is this ok for the rating.js:



// When the document is ready

$(document).ready(function() {
    // Display the stars
    displayStars();

/**
* This part is the rating part of displayimage.php
*/
function rate(obj) {
    $.get('ratepic.php?rate=' + obj.title + '&pic=' + js_vars.picture_id + '&form_token=' + js_vars.form_token
            + '&timestamp=' + js_vars.timestamp, function(data) {
        //create a JSON object of the returned data
        var json_data = eval('(' + data + ')');
        //check the data and respond upon it
        js_vars.lang_rate_pic = json_data.msg;
        if(json_data.status == 'success') {
            //vote cast, update rating and show user
            js_vars.rating = json_data.new_rating;
            js_vars.can_vote = "false";
            $('#voting_title').html( json_data.new_rating_text );
        }
        displayStars();
    });
}

function changeover(obj) {
    var id = obj.title;
    for(i=0; i<id; i++) {
        $('#' + js_vars.picture_id + '_' + (i+1)).attr('src', js_vars.theme_dir + 'images/rate_new.png');
    }
}

function changeout(obj) {
    var id = obj.title;
    for(i=0; i<id; i++) {
        var img = js_vars.theme_dir + 'images/rate_full.png';
        if(js_vars.rating <= i) {
            img = js_vars.theme_dir + 'images/rate_empty.png';
        }
        $('#' + js_vars.picture_id + '_' + (i+1)).attr('src', img);
    }
}

function displayStars() {
    if(js_vars.stars_amount != 'fallback') {
        $('#star_rating').empty();
        var center = document.createElement('center');
        center.id = 'rs_center';
        if(js_vars.can_vote == 'true') {
            center.innerHTML = js_vars.lang_rate_pic + '<br />';
        }
        center.innerHTML += buildRating();
        $('#star_rating').append(center);
    } else if(js_vars.can_vote == 'false') {
        $('#star_rating').empty();
        var center = document.createElement('center');
        center.id = 'rs_center';
        center.innerHTML += buildRating();
        $('#star_rating').append(center);
    }
}

function buildRating() {
    var rating_stars = '';

    if(!isNumber(js_vars.stars_amount)) {
        //default to 5 stars
        js_vars.stars_amount = 5;
    }
    if (!js_vars.theme_dir) {
        js_vars.theme_dir = '';
    }
    for(i=0; i < js_vars.stars_amount; i++ ) {
        var star11 = 'rate_full';
        var star12 = 'rate_new';
        if(i > js_vars.rating - 1) {
            star11 = star12 = 'rate_empty';
        }
        if(js_vars.can_vote == 'true') {
            rating_stars += '<img style="cursor:pointer" src="' + js_vars.theme_dir + 'images/' + star11 + '.png" id="' + js_vars.picture_id + '_'+(i+1)+'"'
            rating_stars += ' title="' + (i+1) + '" onmouseout="changeout(this)" onmouseover="changeover(this)" onclick="rate(this)" />';
        } else {
            rating_stars += '<img src="' + js_vars.theme_dir + 'images/' + star11 + '.png" alt="' + js_vars.rating + '" title="' + js_vars.rating + '"/>';
        }
    }
    return rating_stars;
}

function isNumber(val) {
    return /^-?((\d+\.?\d?)|(\.\d+))$/.test(val);
}



allvip

For Andre: please, 1000 PLEASE.
Help me with this.

Αndré

No need to bump this topic, I'll have a look as soon as possible.