where do I find the divs?

[allvip]

I want to find this div:

<div id="PhotoContainer" class="Photo fn-container">
<img class="image" width="1920" height="1080" border="0" alt="" src="albums/userpics/10001/sheryl_lee_laura_palmer_twin_peaks_1992_29.jpg">
<br>
</div>

[allvip]

I would like to ad onclick="showOnclick() and onload="scaleImg() functions to the div to be like this:

http://img161.imagevenue.com/img.php?image=154532158_abstract_blue_cartoon_wallpapers_background_36856_122_208lo.jpg#

Code Select Expand



<td valign="top" align="center">
<a onclick="showOnclick()" href="#">
<img id="thepic" width="924" height="577" alt="aAfkjfp01fo1i-15054/loc208/154532158_abstract_blue_cartoon_wallpapers_background_36856_122_208lo.jpg" src="aAfkjfp01fo1i-15054/loc208/154532158_abstract_blue_cartoon_wallpapers_background_36856_122_208lo.jpg" onload="scaleImg();" style="cursor: pointer;">
</a>
</td>

OR to be like this:

[url]http://www.imagebam.com/image/0dfc9a275893797[/url]

[code]

<tr>
<td colspan="2">
<img id="i275893797" width="900" height="563" style="border: 1px solid black; cursor: pointer;" alt="loading" src="http://108.imagebam.com/download/ChzwbUWjCShaDxqZD0DpxQ/27590/275893797/abstract-blue-cartoon-wallpapers-background-36856.jpg" onclick="scale(this);">
</td>
</tr>



[allvip]

OR to be like this:

http://www.imagebam.com/image/0dfc9a275893797

Code Select Expand



<tr>
<td colspan="2">
<img id="i275893797" width="900" height="563" style="border: 1px solid black; cursor: pointer;" alt="loading" src="http://108.imagebam.com/download/ChzwbUWjCShaDxqZD0DpxQ/27590/275893797/abstract-blue-cartoon-wallpapers-background-36856.jpg" onclick="scale(this);">
</td>
</tr>



[Αndré]

That's probably added by the annotate plugin, so please search in its files.

Moving from themes to plugins board.

[allvip]

I do not have annotate plugin but I disabled a few plgins and now I have :

Code Select Expand



<tr>
<td align="center" style="{SLIDESHOW_STYLE}">
<img class="image" width="720" height="540" border="0" alt="" src="albums/userpics/10001/priscilla_presley_dallas_rays_trial_7~0.jpg">
<br>
</td>
</tr>




I would like to add:

Code Select Expand


<script type="text/javascript">

function showOnclick()
{
what = document.getElementById('thepic');

if (actualWidth == what.width)
        return scaleImg();
else if (actualWidth > what.width)
{
what.width=actualWidth;
what.height=actualHeight;
}
}

function liveResize() {
what = document.getElementById('thepic');
actualHeight=what.height; actualWidth=what.width;
if (fitsInWindow())return;
if (what.width!=actualWidth) {
what.width=tableWidth();what.height = (actualHeight/actualWidth) * what.width;
}
}

function setImgWidth(){
if (fitsInWindow())return;
document.getElementById('thepic').width=tableWidth();
}
function fitsInWindow() {
   what = document.getElementById('thepic');
   var  actualWidth= what.width;
  if (actualWidth<tableWidth()) {

   return true;
  } else {
  return false;
  }
  }
</script>



[allvip]

and add :

Code Select Expand



<a onclick="showOnclick()" href="#">
onload="scaleImg();" style="cursor: pointer;"



like here:

Code Select Expand



<td valign="top" align="center">
<a onclick="showOnclick()" href="#">
<img id="thepic" width="924" height="577" alt="aAfkjfp01fo1i-15054/loc208/abstract_blue.jpg" src="aAfkjfp01fo1i-15054/loc208/abstract_blue.jpg" onload="scaleImg();" style="cursor: pointer;">
</a>
</td>



[Αndré]

Have a look at the function theme_html_picture in your theme's theme.php file. If it doesn't exist, copy it from themes/sample/theme.php.

[allvip]

but I do not know how.I need a tip on how to start.
all coppermine files have php stuff no html .
even  themes.inc.php

maybe I should add the javascript at the begining of themes.inc.php and <a onclick="showOnclick()" href="#">
onload="scaleImg();" style="cursor: pointer;" to:

Code Select Expand



EOT;
            $fullsize_html .=  '<td align="center" valign="middle" background="' . htmlspecialchars($imagedata['path']) . '" ' . $imagedata['geometry'] . ' class="image">';
            $fullsize_html .=  '<div id="content">';
            $fullsize_html .=  '<a href="javascript: window.close()" style="border:none"><img src="images/image.gif?id='
                    . floor(rand()*1000+rand())
                    . '&amp;fullsize=yes" '
                    . $imagedata['geometry']
                    . ' alt="'
                    . htmlspecialchars($imagedata['name'])
                    . '" title="'
                    . htmlspecialchars($imagedata['name'])
                    . $LINEBREAK . $lang_fullsize_popup['click_to_close']
                    . '" /></a><br />' . $LINEBREAK;
            $fullsize_html .=  <<<EOT
                        </div>
                    </td>
                </tr>
            </table>

EOT;
        } else {
            $fullsize_html .=  '        <div id="content">'.$LINEBREAK;
            $fullsize_html .=  '<a href="javascript: window.close()"><img src="'
            . htmlspecialchars($imagedata['path']) . '" '
            . $imagedata['geometry']
            . ' id="fullsize_image" alt="'
            . htmlspecialchars($imagedata['name'])
            . '" title="'
            . htmlspecialchars($imagedata['name'])
            . $LINEBREAK . $lang_fullsize_popup['click_to_close']
            . '" /></a><br />' . $LINEBREAK
            . '        </div>'.$LINEBREAK;
        }
    }
    $fullsize_html .= <<<EOT
  </body>
</html>

EOT;




if is ok what I say what exactly should I write in the above code to add onclik , onload functions and cursor style

if is not ok what I say ( I do not know php - I am just trying ) where should I add the javacript and onclik , onload functions and cursor style?

[allvip]

thanks. I will try.

[Αndré]

For testing purposes just add your JavaScript code to your theme's template.html file and adjust the HTML part in the theme_html_picture function. Or better, describe what you're trying to accomplish. I initially thought you want to adjust the intermediate-sized view, but as you just posted some code from the full-sized view, I'm no longer certain.

[allvip]

thanks a lot.

Create intermediate pictures in config is disabled. never had it enabled.images shows full size:

http://allvip.us/gallery/displayimage.php?pid=7699#top_display_media


I'm trying to make the full image resize to monitor resolution and when I click the image to expand to full size like here:

http://img161.imagevenue.com/img.php?image=154532158_abstract_blue_cartoon_wallpapers_background_36856_122_208lo.jpg#

you can see that the blue backround is resized to monitor resoultion and when I click it shows full size.

[allvip]

click again and shows resized to monitor

[allvip]

are many $pic_html in function theme_html_picture.

do I have to add onload="scaleImg();" style="cursor: pointer;" to all?

is onload=\"scaleImg();\"  and style=\"cursor: pointer;\"  correct?

where should I add <a onclick="showOnclick()" href="#"> </a> or onclick="showOnclick()" href="#" or < onclick="showOnclick()" href="#"> ?

thanks.

[Αndré]

Create intermediate pictures in config is disabled. never had it enabled.images shows full size:

http://allvip.us/gallery/displayimage.php?pid=7699#top_display_media

This is actually the intermediate-sized view, regardless if an intermediate-sized version is displayed or not.

are many $pic_html in function theme_html_picture.

do I have to add onload="scaleImg();" style="cursor: pointer;" to all?

Depending on your settings you must add your code to just one line, probably

Code Select Expand

$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$CURRENT_PIC_DATA['filename']}\" /><br />" . $LINEBREAK;
as that's the line for full-sized pictures without the transparent overlay.

[allvip]

ok.thanks

[allvip]

I added in template.html after:

Code Select Expand



{JAVASCRIPT}

<!--

  SVN version info:

  Coppermine version: 1.5.9

  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/curve/template.html $

  $Revision: 7809 $

-->



this code:

Code Select Expand



<script type="text/javascript">

function showOnclick()
{
what = document.getElementByClassName('image');

if (actualWidth == what.width)
        return scaleImg();
else if (actualWidth > what.width)
{
what.width=actualWidth;
what.height=actualHeight;
}
}

function liveResize() {
what = document.getElementByClassName('image');
actualHeight=what.height; actualWidth=what.width;
if (fitsInWindow())return;
if (what.width!=actualWidth) {
what.width=tableWidth();what.height = (actualHeight/actualWidth) * what.width;
}
}

function setImgWidth(){
if (fitsInWindow())return;
document.getElementByClassName('image').width=tableWidth();
}
function fitsInWindow() {
   what = document.getElementByClassName('image');
   var  actualWidth= what.width;
  if (actualWidth<tableWidth()) {

   return true;
  } else {
  return false;
  }
  }

</script>

I used what = document.getElementByClassName('image'); not what = document.getElementById ('thepic');

and in theme.php theme_html_picture function

find:

Code Select Expand


$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></a><br />" . $LINEBREAK;


replace:

Code Select Expand


$pic_html = "<a onclick=\"showOnclick()\" href=\"#\"><img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" onload=\"scaleImg();\" style=\"cursor: pointer;\" /></a><br />" . $LINEBREAK;


the image is no wrapped in a tag like this:

Code Select Expand


<a href="#" onclick="showOnclick()">
<img class="image" width="1200" height="2376" border="0" style="cursor: pointer;" onload="scaleImg();" alt="" src="albums/userpics/10001/Rihanna_000015.jpg">
</a>

but onload="scaleImg(); does not work
any help please
should I give up on this idea?


[allvip]

but onload="scaleImg(); does not work
any help please
should I give up on this idea?

[Αndré]

Sorry, but we cannot support 3rd party code. I don't know how it is supposed to work or which requirements it needs to run properly.

[allvip]

ok.thanks

[allvip]

I POSTED THE SOLUTION IN Images to fit screen resolution thread:

http://forum.coppermine-gallery.net/index.php/topic,76542.msg371018.html#new