|
JavaScript - Image Resize Based Of Of Original Px Width
I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can.
This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no Similar TutorialsI have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! Needless to say, I am no coder! I dabble with it only when I have to. I have images/text linked to buttons that fade in “onclick” from “original” images/text . I’ve gotten this to work great with text or image but… I would like the images/text to fade out and return to “original” images/text after a time limit and or no mouse use. Here’s the code I have so far: Code: $(document).ready(function(){
$('.image1).click(function() {
$('#original_image).fadeOut(300, function() {
var the_image = $('#image1).html();
$(this).html(the_image).fadeIn(300);
});
});
Thanks I want to set the width of a div to be the same width of the image inside the div. The following code works great. But... The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier? Any help would be great! PHP Code: jQuery: $(document).ready(function(){ var newWidth = $('div.wrapper img').attr('width'); $('div.wrapper').width(newWidth); }); HTML: <div class="wrapper"> <p><img src="image1.jpg" width="200" /><br /> Caption</p> </div> <div class="wrapper"> <p><img src="image2.jpg" width="250" /><br /> Caption</p> </div> I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website? We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window. If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript. http://www.louisvuitton.com/ Thanks all Chris Can someone tell me how to veiw this eval's out put? PHP Code: function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } PHP Code: <?php // to change the image size within the web page function imageResize($width, $height, $target) { //takes the larger size of the width and height and applies the formula accordingly... //this is so this script will work dynamically with any size image if ($width > $height) { $percentage = ($target / $width); } else { $percentage = ($target / $height); } //gets the new value and applies the percentage, then rounds the value $width = round($width * $percentage); $height = round($height * $percentage); //returns the new sizes in html image tag format... //this is so you can plug this function inside an image tag and just get the return "width='$width' height='$height'"; } ?> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Ronnie T. Moore, Editor --> <!-- Web Site: The JavaScript Source --> <!-- Begin var photo_1 = new Image(); var photo_2 = new Image(); var photo_3 = new Image(); photo_1.src = "uploads/harkly_1.jpg"; photo_2.src = "uploads/harkly_2.jpg"; photo_3.src = "uploads/harkly_3.jpg"; function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } // End --> </script> </HEAD> <?php //get the image size of the picture and load it into an array $photo_1="uploads/harkly_1.jpg"; $photo_2="uploads/harkly_2.jpg"; $photo_3="uploads/harkly_3.jpg"; $myImg1 = getimagesize($photo_1); $myImg2 = getimagesize($photo_2); $myImg3 = getimagesize($photo_3); echo " <BODY> <center> <table border=1> <tr><td> <p> <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p> <td width=440 height=300> <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> </tr> </table> </center> "; ?> Hello Everyone! I hope someone can help me with fixing this javascript code About the Code So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum. What does the code do? The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images. There are different resize image options: 1. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do. 2. [rimg=Width,Height]IMG_SRC[/rimg ] // with this option, you can change the width and height of the image. 3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image 4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted 5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead. 6. [rimg=x]IMG_SRC[/rimg] //x will be both the height and width (so it'll be a square...) Here is a test thread I made to test the "rimg code", so you can see how the code works: http://s1.zetaboards.com/Piano2/topic/2874654/1/ What are the problems with the Code? - the Images are not resized correctly - sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong. - or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again - In the Search View (when using the search) the images are too big and almost take the whole screen... - the first option "[rimg][rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled And finally this is the Javascript Code: PHP Code: <script type="text/javascript"> // Rimg by RedBldSandman of ZBCode.com $(function() { if (location.href.match("topic")||location.href.match("single")) { $(".c_post").each(function() { parse_rimg(this); }); } else if (location.href.match("search")) { $(".search_results").each(function() { parse_rimg($(this).children("div:eq(0)")); }); } else if (location.href.match("post")) { var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />"; $("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>"); $("button[name=rimg]").mouseover(function() { $("input[name=helpbox]").val("Insert Image (with resize options)"); }).click(function(e) { if (e.preventDefault) e.preventDefault(); e.returnValue = false; var u_p = prompt("Enter the Image Location","http://"); if (u_p==null) return; var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image"); if (u_w==null) return; u_w = u_w.replace(/s/gi,"").toLowerCase(); if (u_w=="") { ZetaInsert("[rimg]"+u_p+"[/rimg]"); return; } else if (u_w.match("%")) { ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]"); return; } else if (u_w=="h") { var u_h = prompt("Enter Resize Height"); if (u_h==null) return; ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (u_w=="w") { var u_h = prompt("Enter Resize Width"); if (u_h==null) return; ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]"); return; } else if (parseInt(u_w)) { var u_h = prompt("Enter Chosen Height"); if (u_h==null) return; ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]"); } }); $("#topic_review tbody tr").each(function() { parse_rimg($(this).children("td:eq(1)")); }); } }); function parse_rimg(z) { $(z).html($(z).html().replace(/[rimg(?:=s*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) { if (y.match("%")) { y = y.replace(/[^d.]/gi,""); return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />"; } else if (y.match(/D/i)) { y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0]; y = (y!="h"&&y!="w")?null:y; if (y) { return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />"; } else { return x; } } else if (!a) { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />"; } else { return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />"; } })); $(".Rimg_single").not("div.spoiler .Rimg_single").each(function() { Rimg_single(this); }); $(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() { Rimg_percent(this); }); $(z).find("div.spoiler_toggle").click(function() { $(this).next().toggle(); $(this).next().find(".Rimg_single").each(function() { Rimg_single(this); }); $(this).next().find(".Rimg_percent").each(function() { Rimg_percent(this); }); }); } function Rimg_single(x) { var oldH = $(x).height(); var oldW = $(x).width(); var newD = $(x).attr("alt").replace(/[^d.]/gi,""); if ($(x).hasClass("Rimg_h")) { $(x).height(newD).width((newD/oldH)*oldW); } else if ($(x).hasClass("Rimg_w")) { $(x).width(newD).height((newD/oldW)*oldH); } $(x).attr("alt","Posted Image").removeAttr("class"); } function Rimg_percent(x) { var NewD = $(x).attr("alt").replace(/[^d.]/gi,"")/100; $(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class"); } function Preview() { var prevQuote; if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) { if (!$("#c_post-preview").length) { $("#c_post").prepend("<div id='c_post-preview'></div>"); } if ($("#txt_quote").length && $("#txt_quote").val()) { prevQuote = "[quote]" + $("#txt_quote").val() + "[/quote]"; } else { prevQuote = ""; } $.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) { $("#c_post-preview").html(s); if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview")); parse_rimg($("#c_post-preview")); }); } return false; } </script> Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE? Thanks for your answers and help! Hi, I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome). Thanks, akrylic hi, which is the first code in javascript to load an image from my computer and then to automatically resize it to me ... as in the facebook thanks
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob hello i'm building a search engine and one of the options i'm implementing is this: the user is able to control the scale of the thumbnail, small, medium and large the problem is that when i have 1000 pictures inside a div when i hit resize i get like a 5 sec delay for them to resize here is the javascript code: Code: Code: var factor;
function fillImg(imgPath, imgElement){
imageObj = new Image(32,32);
imageObj.src = imgPath;
if(imgElement.src != imgPath ){
imgElement.src = imgPath;
}
}
function errHandler(err){
alert("Error occured!");
}
function resizeImgList(scale){
if(scale == "s"){
factor = 50;
}else if(scale == "m"){
factor = 100;
}else{
factor = 150;
}
var lists = document.getElementById("rs_ls").getElementsByTagName("li");
for(var li_index = 0; li_index < lists.length; li_index++){
var canvas = lists[li_index].getElementsByTagName("span");
for(var c_index = 0; c_index < canvas.length; c_index++){
var link = canvas[c_index].getElementsByTagName("a");
for(var a_index = 0; a_index < link.length; a_index++){
var image = link[a_index].getElementsByTagName("img");
for(var i_index = 0; i_index < image.length; i_index++){
var w = $(image[i_index]).attr("width");
var h = $(image[i_index]).attr("height");
var results = resizeItem(w,h,factor,factor);
var w = results[0];
var h = results[1];
var m = results[2];
$(image[i_index]).attr("width",w);
$(image[i_index]).attr("height",h);
$(image[i_index]).attr("style","width:"+w+"px;height:"+h+"px;");
}
wa = w+12;
ha = h+12;
$(link[a_index]).attr("style","width:"+wa+"px;height:"+ha+"px;");
}
wc = w+12;
hc = h+12;
$(canvas[c_index]).attr("style","width:"+wc+"px;height:"+hc+"px;margin-left:"+m+"px;margin-right:"+m+"px;");
}
wli = w + 12 + m * 2;
hli = h + 12;
$(lists[li_index]).attr("style","width:"+wli+"px;height:"+hli+"px;");
}
}
function resizeItem(eWidth, eHeight, tWidth, tHeight) {
percentage = (tHeight / eHeight);
newHeight = parseInt(eHeight * percentage);
newWidth = parseInt(eWidth * percentage);
if (newWidth > tWidth) {
percentage = (tWidth / newWidth);
newHeight = parseInt(newHeight * percentage);
newWidth = parseInt(newWidth * percentage);
}
margin = (tWidth - newWidth + 12) / 2;
results = [newWidth, newHeight, margin];
return results;
}
each result set of 50 images has this structu HTML Code: Code: <span> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> . . . <li>...</li> <!-- 50 <li> --> </ul> </span> so 50 results are contained inside a span each <li> has this structure inside: HTML Code: Code: <li> <span> <a href...> <img> </a> </span> </li> I altered the resizeImgList function with 1 for loop but even then it didnt seem to improve. i was thinking that i could resize only the results the user is currently seeing inside the div, the current <span> of results but i'm anaware of how to accomplish this please if anyone has any idea I would be gratefull. Thank you. Peter. PS. results (spans) are fetched via AJAX on scrolldown inside the a div (which is the result container). Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? Hi, I've just created an image based digital clock following a youtube tutorial, and I understand all of it except one thing. I have created a regular digital clock (a text one), and then split this into an array. So I can manipulate the hours/ mins/ secs with [0],[1] and [2], is this the element that makes my regular text into the images I am using? There must be a correlation between the two, and that's all I can see that would do that for me. Here is the code: Code:
digit_Images = ["d0.jpg","d1.jpg","d2.jpg","d3.jpg","d4.jpg","d5.jpg","d6.jpg","d7.jpg","d8.jpg","d9.jpg",
"d10.jpg","d11.jpg","d12.jpg"]
for (i=0;i<digit_Images.length;i++){
document.write('<img style="display: none;" src="' + digit_Images[i] + '" />');
}
function clock_final(){
//make time object
the_Date = new Date();
current_Time = the_Date.getHours() + ":" + the_Date.getMinutes() + ":" + the_Date.getSeconds();
var time_Parts = current_Time.split(":");
//am or pm
if (time_Parts[1] <=12){
var AM_PM = digit_Images[11];
}
else{
var AM_PM = digit_Images[12];
}
//split down to 12 hour clock by subtracting 12
if (time_Parts[0]>=13){
time_Parts[0] = time_Parts[0] - 12 + "";
}
else if(time_Parts[0] =="0"){
time_Parts[0] = "12";
}
var the_Clock = new Array();
for (var i = 0; i < time_Parts.length; i++) {
if (time_Parts[i].length == 1) {
the_Clock[i] = '<img src="' + digit_Images[0] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i])] + '" />';
} else if (time_Parts[i].length ==2) {
the_Clock[i] = '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(0))] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(1))] + '" />';
}
}
var clockHTMLInput = the_Clock[0] + '<img src="' + digit_Images[10] + '" />' + the_Clock[1] + '<img src="' + digit_Images[10] + '" />' + the_Clock[2] + '<img src="' +AM_PM + '" />';
document.getElementById('clock').innerHTML = clockHTMLInput;
}
Hope that's not too jumbled. Thanks. Hello guys ! I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document : Code: <script type="text/javascript">
aImg = new Image();
aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;
document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>
While the image is displayed, the value written for the height and width is "0". This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7. Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on Any help would be greatly apreciated, thanks ! Hi CF, I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle. I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page. This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth). Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width. I've tried maybe a dozen different scripts, but here's my most recent: Code: function testImage(){
if (defaultImage.naturalWidth > 320){
wideMode = true;
}
placeImage();
}
function loadFirstImage(){
defaultImage.src = "images/myGIF.gif";
defaultImage.onLoad = testImage();
}
Any ideas on how to accurately get an image object's width after loading, but before placing it on the page? Any help is much appreciated. Thanks, ~gyz Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hello, I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel. I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying. I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement. Any help would be very gratefully recieved. Thanks, Matt I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate. Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. |
|||||||