dynamic image resize

vsPiotr

Hi All,

Is it possible to set up a theme to set the max width/height of the images based on screen size?

I just don't want to do any page reloads so I guess if the size is gathered at album/index.php and passed to image that would be ideal.

Any suggestions?

vsPiotr

progress:
I tried some AJAX (grabbed from tutorial, I don't really know what I'm doing exactly)
`
///AJAX TESTING

function getXMLHttp(){
var xmlHttp
try{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e){
//Internet Explorer
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}

function MakeRequest(){
var xmlHttp = getXMLHttp();

xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
HandleResponse(xmlHttp.responseText);
}
}

xmlHttp.open("GET", "<?php echo $_zp_themeroot ?>/customImage.php", true);
xmlHttp.send(null);
}

function HandleResponse(response){
document.getElementById('image').innerHTML = response;
}
`
So essentially I'm executing customImage.php which contains:
`
<?php
if (function_exists('printUserSizeImage')) {
printUserSizeImage(getImageTitle());
} else {
printDefaultSizedImage(getImageTitle());
}
?>
`
but I get undefined function errors.

at a loss again.

P.

acrylian

I can't help specifially but you can get the pure screensize values via JS and surely with more conventient JS frameworks like jQuery. You will have to do some research.

Genereally I would recommend to use the viewport size (browser window) and not the screensize. If someone has a big screen that does not necessarily mean he browses full screen (mac users do rarely as there is not real full screen mode). The bigger the screen the bigger the chance that the users shares the screen with several programs at the time.

sbillard

Please also look at the viewer sized images plugin. It will give you an example of how to resize the images without a page reload. You would, of course, have to figure out what size to resize to.

vsPiotr

Thanks guys! That definitely points me in the right direction

vsPiotr

Hi,
for the curious, I did get it to work using jQuery to basically append w & h of my "content" element to all the thumbnail "li" links and from there I used
printCustomSizedImage("alt",NULL, $_GET['w'], $_GET['h']).

I do a bit more checking before the image so that if the w and h can accommodate the default size then it prints that.
here's my jQuery:
`
$(document).ready(function(){
$("li a").each(function()
{
this.href += "&w=" + $("#content").width() + "&h=" + $("#content").height();
});
});
`