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

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

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.