Advanced search  

News:

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

Pages: [1]   Go Down

Author Topic: Images to fit screen resolution ( responsive image )  (Read 20593 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Images to fit screen resolution ( responsive image )
« on: August 16, 2013, 09:20:18 pm »

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
« Last Edit: June 09, 2014, 09:21:34 pm by allvip »
Logged

metal13

  • Coppermine newbie
  • Offline Offline
  • Posts: 14
Re: Images to fit screen resolution
« Reply #1 on: August 17, 2013, 06:11:43 am »

try adding this in your current theme's css

Code: [Select]
image {
width: auto;
height: auto;
}

or try this

Code: [Select]
image {
width: 100%;
height: auto;
}
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #2 on: August 17, 2013, 02:13:23 pm »

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]

display_media {

    background: #FFFFFF ;

    padding-top: 3px;

    padding-right: 3px;

    padding-bottom: 3px;

    padding-left: 3px;

}

I added:

Code: [Select]

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.

Logged

metal13

  • Coppermine newbie
  • Offline Offline
  • Posts: 14
Re: Images to fit screen resolution
« Reply #3 on: August 17, 2013, 08:05:08 pm »

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







Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #4 on: August 18, 2013, 12:06:53 am »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #5 on: November 06, 2013, 11:56:41 pm »

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

with:

Code: [Select]
$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]
#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]
<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.
« Last Edit: March 27, 2014, 03:48:03 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #6 on: November 07, 2013, 12:14:38 am »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #7 on: November 07, 2013, 12:23:23 am »

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;}
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #8 on: November 07, 2013, 12:02:02 pm »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15369
Re: Images to fit screen resolution
« Reply #9 on: March 27, 2014, 01:45:48 pm »

I suggest to convert this mod to a genuine plugin.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Re: Images to fit screen resolution
« Reply #10 on: March 27, 2014, 02:09:53 pm »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #11 on: March 27, 2014, 02:16:41 pm »

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

Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15369
Re: Re: Images to fit screen resolution
« Reply #12 on: March 27, 2014, 02:21:25 pm »

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

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15369
Re: Images to fit screen resolution
« Reply #13 on: March 27, 2014, 03:20:25 pm »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Images to fit screen resolution
« Reply #14 on: March 27, 2014, 03:29:04 pm »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Re: Images to fit screen resolution
« Reply #15 on: June 09, 2014, 08:55:51 pm »

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
Logged
Pages: [1]   Go Up
 

Page created in 0.026 seconds with 21 queries.