[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

resize image using php and javascript

Posted on 2007-03-20
5
Medium Priority
?
270 Views
Last Modified: 2013-11-19
Dear Experts!

I have a static html page like this, a php remote image resizer like resizer.php

<html><body>

some stuf here
<div id="something">
some stuff
<img src="filename.jpg">
some stuff
<img src="filename2.jpg">
some stuff
</div>

</body></html>

I'd like to resize images bigger than 200px in width in a specific div ( like id=something ) using my php image resizer, and javascript should help here easily,

the result would be something like this: <img src="resizer.php?width=200&file=filename.jpg" />

A nice javascript may solve the problem, or anybody has any better idea to resize images in a specific div in a static html page?

Regards

PS. these static pages are generated by a Publishing Platform and template based,
the file extensions are .php and I can use other php codes in my page. but the img tags are from the publishing engine and can not be changed. (this may help either)
0
Comment
Question by:Claudia_Presto
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 11

Accepted Solution

by:
flipz earned 1500 total points
ID: 18757299
You may have to tweak this a little depending on if your files (code pages and images) are all in different directories - I can help if they are.

<div id="something">
some stuff
<img src="filename.jpg">
some stuff
<img src="filename2.jpg">
some stuff
</div>
<script language="JavaScript">

var objDiv = document.getElementById("something");

for (idx=0;idx<objDiv.childNodes.length; idx++) {
      if (objDiv.childNodes[idx].nodeName == "IMG") {
            arrPaths = objDiv.childNodes[idx].src.split("/");
            objDiv.childNodes[idx].src = "resizer.php?width=200&file=" + arrPaths[arrPaths.length-1];
      }
}
</script>
0
 
LVL 4

Expert Comment

by:Cyber-Drugs
ID: 18757611
Claudia_Presto,

The above script from flipz should do the job for you, but to make it run a bit smoother, maybe you should add the follow logic:

if new width is less than current width + 5 pixels, then just stretch the image
else reload the new image

Obviously you need to do the same logic with the height, and possibly go even further, as to be honest the way you are looking at now, will reload the image for each pixel it is resized which could use a fair amount of bandwidth depending on the image size and how much the user resizes it, plus on top of bandwidth it could cause a bit of a strain on the browser.


Just a thought.
0
 
LVL 3

Expert Comment

by:exoska
ID: 18762961
and for some addition to flipz code , rendering childnodes collection may not be the best way, as images may be deeper levels on DOM..

id try something like this,

<script language="JavaScript">

var objDiv = document.getElementById("something").getElementsByTagName('IMG');


for (idx=0;idx<objDiv.length; idx++) {
    arrPaths = objDiv[idx].src.split("/");
    objDiv[idx].src = "resizer.php?width=200&file=" + arrPaths[arrPaths.length-1];
}
</script>
0
 
LVL 3

Expert Comment

by:exoska
ID: 18762977
and cyber-drugs is also right.
so in the previous function, while rendering images. storing their src's and setting them to null(so they would stop loading), and just after the collection render, setting their src s to the php named ones that you d stored might be a better way to challange the bandwidth issue
0
 

Author Comment

by:Claudia_Presto
ID: 18791728
Thank you all,

to flipz or exoska,
as I do not know JavaScript a lot,
could you please add an if clause to your function in order to control the size?
for example if the width is less than 200px then do nothing else do the replacement.

Regards
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question