forum.coppermine-gallery.net
Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: allvip on September 14, 2013, 11:16:28 am
-
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>
-
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# (http://img161.imagevenue.com/img.php?image=154532158_abstract_blue_cartoon_wallpapers_background_36856_122_208lo.jpg#)
<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>
-
OR to be like this:
http://www.imagebam.com/image/0dfc9a275893797 (http://www.imagebam.com/image/0dfc9a275893797)
<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>
-
That's probably added by the annotate plugin, so please search in its files.
Moving from themes to plugins board.
-
I do not have annotate plugin but I disabled a few plgins and now I have :
<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:
<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>
-
and add :
<a onclick="showOnclick()" href="#">
onload="scaleImg();" style="cursor: pointer;"
like here:
<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>
-
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.
-
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:
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())
. '&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?
-
thanks. I will try.
-
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.
-
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 (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# (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.
-
click again and shows resized to monitor
-
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.
-
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 (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
$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.
-
ok.thanks
-
I added in template.html after:
{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:
<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:
$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /></a><br />" . $LINEBREAK;
replace:
$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:
<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?
-
but onload="scaleImg(); does not work
any help please
should I give up on this idea?
-
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.
-
ok.thanks
-
I POSTED THE SOLUTION IN Images to fit screen resolution thread:
http://forum.coppermine-gallery.net/index.php/topic,76542.msg371018.html#new (http://forum.coppermine-gallery.net/index.php/topic,76542.msg371018.html#new)