Images to fit screen resolution ( responsive image )

[allvip]

I want to show images in full size (no intermediare images).
Is it possible to make the image fit screen resolution?

Right now it looks like this:

http://allvip.us/gallery/displayimage.php?album=141&pid=2142#im=0

[metal13]

try adding this in your current theme's css

Code Select Expand

image {
width: auto;
height: auto;
}

or try this

Code Select Expand

image {
width: 100%;
height: auto;
}

[allvip]

the second one works but not in chrome (works for firefox,ie and safari).

What code should I add in the css for chrome ?

also I did not add it to the image css (it affects the thumbnails too) but to display media css because the images are in a table with dispay media class in curve theme like this:

I already had:

Code Select Expand



display_media {

    background: #FFFFFF ;

    padding-top: 3px;

    padding-right: 3px;

    padding-bottom: 3px;

    padding-left: 3px;

}


I added:

Code Select Expand



display_media .image {

    width: 100%;

    height: auto;

}


Now the image is smaller then the real size -1900px.Image resized my screen resolution 1000 px.

Can I show a zoom option on hover over the image like here:

http://allvip.us/gallery/albums/userpics/10001/sheryl_lee_laura_palmer_twin_peaks_1992_58.jpg

or some option for people to see full size image.

[metal13]

try this
http://forum.coppermine-gallery.net/index.php/topic,62905.html


try using auto on the image then use 100% width on the div or table wrapping your image

[allvip]

with LightBox NotesFor.net plugin the image shrinks to very,very small size like 40x20px.if I add auto on the image then use 100% image is real size a breaks the layout.

[allvip]

FINAL SOLUTION

I use only the full size pics (original image).I deleted the intermediate pics(no pop up. will show on place).

The image will resize to fit the monitor even if users view your gallery from a small monitor,table or iphone the image will resize and will show full size on click.

This way you can upload very big images and in config set the width to original image to max value.This way coppermine won't crop your images if they are bigger then width set in cofig when you upload them.

1. Open themes/your_theme_name/template.html and add after {JAVASCRIPT}:

Code Select Expand


<script src="themes/curve/js/resize.js" type="text/javascript"></script>


replace curve with your theme name.

2. Open themes/your_theme_name/theme.php - find theme_html_picture function(if you do not have it in your theme,copy it from themes/sample/theme.php:

replace:

Code Select Expand


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


with:

Code Select Expand


$pic_html ="<img src=\"" . $picture_url . "\" {$image_size['geom']} id=\"thepic\"  onLoad=\"scaleImg();\"  onClick=\"showOnclick()\" border=\"0\" alt=\"\" /><br />" . $LINEBREAK;


3. replace all class=\"image\" from theme_html_picture function with id=\"thepic\"


4.

DOWNLOAD   resize.js (I attached it to this post).
Creat a folder named js in your theme folder and upload resize.js.


5.

add to .css file:

Code Select Expand


#thepic {
    cursor: zoom-in;
    cursor:-webkit-zoom-in;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* pseudo-classes for image links */
a:link #thepic{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:visited #thepic{
    border-style:solid;
    border-width:1px;
    border-color:#840084;
    margin:2px;
}

a:focus #thepic{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:hover #thepic{
    border-style:solid;
    border-width:1px;
    border-color:#0033CC;
    margin:2px;
}

a:active #thepic{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}



you can change cursor:pointer if you like it more.

IMPORTANT: you can also include the code from resize.js in template.html.
The website loads faster if the code is inline for small js files like resize.js.

To do that:

_open your_theme_name/template.html and add under {JAVASCRIPT}:

Code Select Expand


<script>
$(document).ready( function() {
  PASTE THE RESIZE.JS CODE HERE
});
</script>


_open resize.js with notepad or word pad,copy all the content and paste it the above code.

[allvip]

this works if Create intermediate pictures is off in the config or the intermediate pictures is bigger then the monitor resolution(like iphones).Pop-up will still work but you shoud change cursor to pointer if  intermediate pictures is on.

DEMO:

http://allvip.us/gallery/displayimage.php?album=508&pid=20299#top_display_media

use this script if :
1.you want to have full size images ( intermediate pictures loads the sever with more gigabytes of images) 2.users to have a inplace view of the full size image and not wait for the image to open in the pop-up window.
3.images to resize on very small monitors-resize browser window and refresh to see how it looks on small monitors.

[allvip]

open rezize.js ans change -100 to -200,-50 etc depend or the margin and padding of your divs to fit the image in the table:

function tableWidth()
{return windowWidth()-100;}

[allvip]

test it here

http://quirktools.com/screenfly/

enter this link: http://allvip.us/gallery/displayimage.php?album=508&pid=20305#top_display_media or any other link from my gallery.

you can test it on Desktop, Tablet, Mobile, Television, Custom Screen size

click refresh button and allow scrolling (before the eye button) after you choose one option.

the image is resonsive and can be clicked to zoom to full size.

[Αndré]

I suggest to convert this mod to a genuine plugin.

[allvip]

I suggest to convert this mod to a genuine plugin.

I really hope you are not talking to me.I don't think I can make a plugin but I really thing I should try anyway.
This way I will learn more about php and about coppermine.

[allvip]

I think it should be a coppermine future for users that do not want to use intermediate pictures.

[Αndré]

I just had a closer look at the mod and it seems to be quite easy to convert it to a plugin. Maybe I create it even today if I find enough spare time.

[Αndré]

I added a first draft of the plugin to our SVN repository: http://sourceforge.net/p/coppermine/code/HEAD/tree/branches/cpg1.5.x/plugins/fit_screen/

[allvip]

I know the code from small js files can be include in the html or php file with script tag.
The website loads faster if code is inline for small js code or css code.

[allvip]

I added a first draft of the plugin to our SVN repository: http://sourceforge.net/p/coppermine/code/HEAD/tree/branches/cpg1.5.x/plugins/fit_screen/

It works perfect.I just added the link for the announcement thread.
Thanks a lot Andre.

Download fit screen plugin here: http://forum.coppermine-gallery.net/index.php/topic,77586.0.html