Dynamic background in picture view

[mahdi1234]

Hello,

Is there a way how to dynamically change background color by user? I mean something like this - http://www.fotoaparat.cz/gallery/popup/547064 - at the top you can hover over color and this color is then used as background.

thanks,
mahdi

[Nibbler]

The page has the code you need; just view source.

[mahdi1234]

Would you suggest where do I need to put this piece of code? I mean which file is the best - some theme file or global file?

[Joachim Müller]

Depends on where you want the user to be able to use it. To use it globally, put it into themes/yourtheme/template.html. To use it for particulr pages only, put it into the corresponding section of themes/yourtheme/theme.php. What particular section to put it in depends on where (on which pages) you want to see it turn up. This being said: you need to post details to get a detailed answer.

[mahdi1234]

I'd like to have this available in actual image detail view, best to have it displayed directly above photo itself.

If I take as example this image http://fotoluzr.net/displayimage.php?pos=-60 I'd like to place it below navigation bar (File x/xxx) and above photo.

[Joachim Müller]

There are several ways to accomplish this - here is one of them: edit themes/yourtheme/theme.php, find

Code Select Expand

$template_display_mediaand edit as suggested below. If that variable definition doesn't reside in your custom theme, copy

Code Select Expand

// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media" nowrap="nowrap">
                        <table cellspacing="2" cellpadding="0" class="imageborder">
                                <tr>
                                        <td align="center">
                                                {IMAGE}

                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2" cellpadding="0" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb"><center>
                                                {CAPTION}
                                        </center></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;from themes/sample/theme.php into a new line before

Code Select Expand

?>in the file themes/yourtheme/theme.php

Then add the HTML taken from the page http://www.fotoaparat.cz/gallery/popup/547064 to the HTML code you just pasted in - I suggest adding your code after

Code Select Expand

                <td align="center" class="display_media" nowrap="nowrap">The code you need to add there is the selector itself:

Code Select Expand

<p style="padding: 15px;text-align: center;">
<a onmouseover="changeBackground('#000')" style="background: #000;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#111')" style="background: #111;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#222')" style="background: #222;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#333')" style="background: #333;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#444')" style="background: #444;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#555')" style="background: #555;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#666')" style="background: #666;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#777')" style="background: #777;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#888')" style="background: #888;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#999')" style="background: #999;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#aaa')" style="background: #aaa;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#bbb')" style="background: #bbb;">&nbsp</a><a onmouseover="changeBackground('#ccc')" style="background: #ccc;">&nbsp</a><a onmouseover="changeBackground('#ddd')" style="background: #ddd;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#eee')" style="background: #eee;padding: 10px; margin: 0 3px;">&nbsp</a><a onmouseover="changeBackground('#fff')" style="background: #fff;padding: 10px; margin: 0 3px;">&nbsp</a></p>Finally, you need to add the tiny bit of JavaScript. To do so, edit themes/yourtheme/template.html, find

Code Select Expand

<script type="text/javascript" src="scripts.js"></script>and add after it (in a new line)

Code Select Expand

<script type="text/javascript">
  function changeBackground(color)
  {
    b = document.getElementById("body");
    b.style.background = color;
  }
</script>Save both your changes and upload them to your server, overwriting the existing copies there. That's all as far as I can see. Please note that the person who created http://www.fotoaparat.cz/gallery/popup/547064 doesn't know his way around very well as far as standards compliance and coding is concerned, so the code I pasted in to this message is just a little bit improved, but far from being valid or fail-proof.

[mahdi1234]

Thanks a lot Joachim - I can see now selection boxes. Though script doesn't seem to change the background color, I've tried in Mozilla/IE both with JS enabled.

Could it be somehow related to style css where different style has to be overwritten for background? Style definition for my theme can be found at http://fotoluzr.net/themes/hardwired/style.css

[Nibbler]

Either give your body tag an id of 'body' or change

Code Select Expand

b = document.getElementById("body");

to

Code Select Expand

b = document.getElementsByTagName("body")[0];

[mahdi1234]

Thanks Nibbler, it works for main body, but if you look at result it changes color only on "sides". I guess I need to overwrite color for other style elements as well.

Would you suggest how to overwrite e.g. those two below? I guess I can then get rest myself.

.maintable {
        background-color: #000000;
}

.gallery
{
    background-color: #000000;
}


thanks a lot guys.

[mahdi1234]

Fully working now, to be seen at e.g. at this pic http://fotoluzr.net/displayimage.php?pos=-198

to overwrite one needs to associate table elements with id's and then overwrite in js

e.g.

in theme.php

Code Select Expand


<table align="center" width="$width" cellspacing="0" cellpadding="0" class="maintable" id=222>


a in template.html

Code Select Expand


document.getElementById(222).style.background = color;


[dheep]

Guys, thanks for the wonderful explanation.. Since am a newbie to php scripting, am grasping them slowly.. You guys have discussed about getting the dynamic background on actual image detail view.. But could you plese help me in getting this particular dynamic background bar working above the pop-up photo.. Instructions or a ready-made plug-in.. Great thanks for your effort..

[dheep]

Thanks folks! 
I found the answer myself..

[Pascal YAP]

I found the answer myself..

share...

[dheep]

Copy & paste (or edit) this script accordingly in to your theme.php file..

Code Select Expand

// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $ALBUM_SET;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    if (isset($_GET['picfile']))
    {
        if (!GALLERY_ADMIN_MODE) cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);

    $picfile = $_GET['picfile'];
    $picname = $CONFIG['fullpath'] . $picfile;
    $imagesize = @getimagesize($picname);
    $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    }
    elseif (isset($_GET['pid']))
    {
    $pid = (int)$_GET['pid'];
    $sql = "SELECT * " . "FROM {$CONFIG['TABLE_PICTURES']} " . "WHERE pid='$pid' $ALBUM_SET";
    $result = cpg_db_query($sql);

    if (!mysql_num_rows($result)) cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);

    $row = mysql_fetch_array($result);
    $pic_url = get_pic_url($row, 'fullsize');
    $geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';
    $imagedata = array('name' => $row['filename'], 'path' => $pic_url, 'geometry' => $geom);
    }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <script type="text/javascript" src="scripts.js"></script>
  <script type="text/javascript">
  function changeBackground(color)
  {
    b = document.getElementById("body");
    b.style.background = color;
  }
</script>
  <style type="text/css">
  body { margin: 0; padding: 0; background-color: gray; }
    p {text-align: center;}
    img {border: 0 none;}
  #content { margin:0 auto; padding:0; border:0; }
  table { border:0; height:100%; width:100%; border-collapse:collapse}
  td {         vertical-align: middle; text-align:center; }
  </style>
  </head>
  <body id="body">
  <p class="colors">
<a onmouseover="changeBackground('#000000')" style="background: #000000;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#050505')" style="background: #050505;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#0a0a0a')" style="background: #0a0a0a;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#0f0f0f')" style="background: #0f0f0f;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#141414')" style="background: #141414;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#191919')" style="background: #191919;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#1e1e1e')" style="background: #1e1e1e;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#232323')" style="background: #232323;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#282828')" style="background: #282828;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#2d2d2d')" style="background: #2d2d2d;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#323232')" style="background: #323232;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#383838')" style="background: #383838;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#3d3d3d')" style="background: #3d3d3d;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#424242')" style="background: #424242;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#474747')" style="background: #474747;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#4c4c4c')" style="background: #4c4c4c;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#515151')" style="background: #515151;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#565656')" style="background: #565656;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#5b5b5b')" style="background: #5b5b5b;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#606060')" style="background: #606060;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#666666')" style="background: #666666;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#6b6b6b')" style="background: #6b6b6b;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#707070')" style="background: #707070;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#757575')" style="background: #757575;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#7a7a7a')" style="background: #7a7a7a;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#7f7f7f')" style="background: #7f7f7f;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#848484')" style="background: #848484;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#898989')" style="background: #898989;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#8e8e8e')" style="background: #8e8e8e;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#939393')" style="background: #939393;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#999999')" style="background: #999999;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#9e9e9e')" style="background: #9e9e9e;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#a3a3a3')" style="background: #a3a3a3;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#a8a8a8')" style="background: #a8a8a8;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#adadad')" style="background: #adadad;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#b2b2b2')" style="background: #b2b2b2;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#b7b7b7')" style="background: #b7b7b7;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#bcbcbc')" style="background: #bcbcbc;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#c1c1c1')" style="background: #c1c1c1;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#c6c6c6')" style="background: #c6c6c6;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#cccccc')" style="background: #cccccc;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#d1d1d1')" style="background: #d1d1d1;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#d6d6d6')" style="background: #d6d6d6;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#dbdbdb')" style="background: #dbdbdb;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#e0e0e0')" style="background: #e0e0e0;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#e5e5e5')" style="background: #e5e5e5;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#eaeaea')" style="background: #eaeaea;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#efefef')" style="background: #efefef;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#f4f4f4')" style="background: #f4f4f4;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#f9f9f9')" style="background: #f9f9f9;padding: 1px; margin: 1 1px;">&nbsp</a>
<a onmouseover="changeBackground('#ffffff')" style="background: #ffffff;padding: 1px; margin: 1 1px;">&nbsp</a>
</p>
</p>
    <table>
      <tr>
            <td>
          <div id="content">
              <?php     echo  '<a href="javascript: window.close()"><img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n" . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' ."\n";
               ?>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
<?php
}

And instead of,

Code Select Expand

$pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";

change it to,

Code Select Expand

$pic_html = "<a href=/displayimage.php?pid=$pid&amp;fullsize=1>";

The image will be opening in the parent window..
I did it b'coz it looks awkward, when a popup is opened with this mod..

P.S. If some "php pro" finds any errors or better solution for this script, please edit and make it simple.. And, I donno how to center the image inside the browser window. Please consider it..