Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Dynamic background in picture view  (Read 8813 times)

0 Members and 1 Guest are viewing this topic.

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Dynamic background in picture view
« on: July 28, 2008, 09:47:47 pm »

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
Logged

Nibbler

  • Guest
Re: Dynamic background in picture view
« Reply #1 on: July 28, 2008, 10:05:05 pm »

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

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Re: Dynamic background in picture view
« Reply #2 on: July 28, 2008, 10:28:28 pm »

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?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Dynamic background in picture view
« Reply #3 on: July 29, 2008, 07:00:55 am »

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.
Logged

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Re: Dynamic background in picture view
« Reply #4 on: July 29, 2008, 11:51:34 am »

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.
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Dynamic background in picture view
« Reply #5 on: July 29, 2008, 01:08:57 pm »

There are several ways to accomplish this - here is one of them: edit themes/yourtheme/theme.php, find
Code: [Select]
$template_display_mediaand edit as suggested below. If that variable definition doesn't reside in your custom theme, copy
Code: [Select]
// 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]
?>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]
                <td align="center" class="display_media" nowrap="nowrap">The code you need to add there is the selector itself:
Code: [Select]
<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]
<script type="text/javascript" src="scripts.js"></script>and add after it (in a new line)
Code: [Select]
<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.
« Last Edit: July 29, 2008, 01:15:17 pm by Joachim Müller »
Logged

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Re: Dynamic background in picture view
« Reply #6 on: July 29, 2008, 02:33:29 pm »

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
Logged

Nibbler

  • Guest
Re: Dynamic background in picture view
« Reply #7 on: July 29, 2008, 03:36:11 pm »

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

Code: [Select]
b = document.getElementById("body");
to

Code: [Select]
b = document.getElementsByTagName("body")[0];
Logged

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Re: Dynamic background in picture view
« Reply #8 on: July 29, 2008, 04:00:30 pm »

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.
Logged

mahdi1234

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 60
Re: Dynamic background in picture view
« Reply #9 on: August 09, 2008, 11:17:32 pm »

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]
<table align="center" width="$width" cellspacing="0" cellpadding="0" class="maintable" id=222>

a in template.html
Code: [Select]
document.getElementById(222).style.background = color;
Logged

dheep

  • Coppermine newbie
  • Offline Offline
  • Posts: 7
Re: Dynamic background in picture view
« Reply #10 on: March 09, 2009, 09:59:49 am »

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..
Logged

dheep

  • Coppermine newbie
  • Offline Offline
  • Posts: 7
Re: Dynamic background in picture view
« Reply #11 on: March 09, 2009, 02:06:09 pm »

Thanks folks!  :D
I found the answer myself..
Logged

Pascal YAP

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: fr
  • Offline Offline
  • Gender: Male
  • Posts: 13833
  • Hello World :-)
    • CPG 1.5.x ExperiMental website
Re: Dynamic background in picture view
« Reply #12 on: March 09, 2009, 02:55:13 pm »

Quote
I found the answer myself..
share...
Logged

dheep

  • Coppermine newbie
  • Offline Offline
  • Posts: 7
Re: Dynamic background in picture view
« Reply #13 on: March 09, 2009, 03:33:32 pm »

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

Code: [Select]
// 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]
$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]
$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..
Logged
Pages: [1]   Go Up
 

Page created in 0.023 seconds with 19 queries.