Sizing images with jquery scripts...

There are numerous image-resizing scripts out there, most of them jquery-based.
This appears to be one of the most popular :
http://buildinternet.com/project/supersized/default.php
It's great, in that the script maintains aspect ratio at all times, always fills the screen, and simply hides excess information from the overflowing axis (be it X or Y).
What I'd like to do, however, is make an image fit the viewport vertically 100% (not 99% or 101%, but fit snuggly from top to bottom). Naturally, if the aspect ratio is maintained, then there will be instances of empty areas on the horizontal axis. This, I don't mind. With the design I have in mind, it's not a problem.
So really, I'm looking to fit images 100% snuggly from top to bottom, and left-justify them... so that the resulting blank area be on the right side of the viewport.
Anyone know of a script that will allow me to do this?

One short answer is is this really what you want?
If you increase the size of the image using a script you will introduce distortion. Decreasing may be a little less harmful. These are graphics operations that are better carried out with a graphics program, not a script. And even then, upsizing is a very bad idea.
Also cropping off the tops or sides of images destroys whatever artistic integrity the image has.
If neither of these quality issues bother you, then good luck.

Similar Messages

  • Problem uploading images with php script.

    As a webdebdesigner i developped a cms system to upload images with php to a mysql database. Firefox version 5.0.1 for MAC and earlier have no problems with uploading through the script. But after that version it is impossible to upload images bigger then 250kb. The page where the customer chooses his image for upload stalls and the form is not sent to the actual upload script, which should validate and process the image.
    This problem only occurs in Firefox, all other browsers work just fine!
    On top of that: Giving feedback to firefox not possible for MAC.

    Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web site development issues with Firefox. <br />
    http://forums.mozillazine.org/viewforum.php?f=25 <br />
    You'll need to register and login to be able to post in that forum.

  • Problem: Jstl update query with Jquery script

    Hi all,
    i'm writing a jsp page with this 3 star rating Jquery script to show and vote some <div> (results) .
            <script type="text/javascript">
                                        jQuery(document).ready(function($) {
                                            $("#${Rss.pages_id}").stars({
                                                cancelShow: false,
                                                captionEl: $("#<%=i%>"),
                                                callback: function(ui, type, value){
                                                    alert("Callback! ID = ${Rss.pages_id} Clicked: " + type + ", value: " + value );
                                            $("#${Rss.pages_id}").stars("select", ${Rss.trust_value})
                                    </script>Now i want update the value in my DB(MySql) everytime that i will click on my "star rating"..i want do this with an jstl update query.
    Someone can help me?? Thanks

    Just so as you remember that jquery/javascript is completely client side.
    JSP/JSTL is completely server side.
    The only way to invoke java/JSP from javascript code is to make an http request - normally via ajax.
    Given that, it doesn't make sense to put jquery code and a JSTL update query within the same JSP page.
    The code to update the database should be a seperate resource called by ajax from the main page.
    In that case, it doesn't have to be (and probably shouldn't be) done with JSTL. It is better done with java code within servlet/beans.
    cheers,
    evnafets

  • Export particular sized JPEG with a script

    Hi
    I need a script that would save every page of my indd as JPEG. That´s not a problem. Challenging part is sizing. Resulting JPEGs should be as close to size 768x1024 as possible, but they are not allow to exceed those values. So if the shape is "wrong", one of those values should be exact and other one naturally leaves a little short...
    Is it possible to do that with javascript?

    Hey Petteri!
    Well, the thing is that you can't export JPEG from InDesign to desired width/height. But, what you can do is to process exported image through BridgeTalk directly from InDesign to Photoshop. With BridgeTalk you can first check picture size, and then resize it if needed.
    Hope that helps.
    tomaxxi
    http://indisnip.wordpress.com/

  • Is it possible to merge images from 4 different folders into a single 4x4 image with ps scripting?

    So I have four folders that each contain 970 images.   The images in folder 1 are named exactly the same as the images in folder 2, 3, and 4.   All the images are also 400px in size.   What I'm trying to do is take all images of the same name from each of the 4 folders and put them into a single 800x800 images so that they are arranged in a 4x4 fashion.
    Example:  Each folder has an image named mastiff1.psd.  All four mastiff images are different, but have the same name, and are the same size.  I'd like all four mastiff images to be combined into one double-size image that has all four of the mastiff images on it and save as mastiff1-4x4.
    Is that something that photoshop scripting could do?  I'm a newb to this.  I've used actions plenty, but never scripting.

    To script well you need to know a scripting programming language either JavaScript which works on both Photoshop Platforms or AppleScript which will only Apple Mac machines, Or VSbasic which will only run on windows.  You must also know how Photoshop works and know how  to use Photoshop well.
    There are some things that can not be scripted for Adobe DOM does not have interfaces methods for all of Photoshop's features.  However there is an Adobe Plug-in with the name Scriptlistener witch is like a script recorder anything you do in Photoshop that can be recorded in actions will be recorded into two logs on you desktop when the Scriptlistener plug-in is installed one is in JavaScript syntax the other in VSbasic.   Like Actions there is no logic just hard coded step, step, step...  The code uses the Action Manager to do the Photoshop function.  So things that can not be scripted using Adobe DOM can be scripted using Action Manager code produced by the Scriptlistener Plug-in and the hard coded steps can be modifies into javascript functions that use variables.
    I feel what you want to do would be a real ambitious first Photoshop script.  Adobe scripting documentation, sample script and Scriptlistener  are not part of the standard install. You must download these from Adobe. Adobe Photoshop Scripting | Adobe Developer Connection.
    I don't actually know javascript but I can hack at it. Have done some document layout scripts.  Most require a PSD template but PasteImageRoll does not but all Image must come from the same folder.  Most of my fully automated script require all image to be in the same folder.  However  two of my scripts are interactive.  You can select each image to be layout from anywhere.  Images will be automatically re-sized and positioned which you can then tweak.
    I'm not the best coder still you may want to look ate the code I came up with.
    Paste Image Roll Script and Picture Package Support
    Photo Collage Toolkit UPDATED Made Rotate for Best Fit an option in PasteImageRoll.jsx Edit to customize your default settings.
    Photoshop scripting is powerful and I believe this package demonstrates this.
    The package includes four simple rules to follow when making Photo Collage Template PSD files so they will be compatible with my Photoshop scripts.
    There are twelve scripts in this package they provide the following functions:
    TestCollageTemplate.jsx - Used to test a Photo Collage Template while you are making it with Photoshop.
    CollageTemplateBuilder.jsx - Can build Templates compatible with this toolkit's scripts.
    LayerToAlphaChan.jsx - Used to convert a Prototype Image Layer stack into a template document.
    InteractivePopulateCollage.jsx - Used to interactively populate Any Photo Collage template. Offers most user control inserting pictures and text.
    ReplaceCollageImage.jsx - use to replace a populated collage image Smart Object layer with an other image correctly resized and positioned.
    ChangeTextSize.jsx - This script can be used to change Image stamps text size when the size used by the populating did not work well.
    PopulateCollageTemplate.jsx - Used to Automatically populate a Photo Collage template and leave the populated copy open in Photoshop.
    BatchOneImageCollage.jsx - Used to Automatically Batch Populate Collage templates that only have one image inserted. The Collage or Image may be stamped with text.
    BatchMultiImageCollage.jsx - Used to Automatically Batch Populate Any Photo Collage template with images in a source image folder. Easier to use than the interactive script. Saved collages can be tweaked.
    BatchPicturePackage.jsx - Used to Automatically Batch Populate Any Photo Collage template with an image in a source image folder
    PasteImageRoll.jsx - Paste Images into a document to be print on roll paper.
    PCTpreferences.jsx - Edit This File to Customize Collage Populating scripts default setting and add your own Layer styles.
    Documentation and Examples

  • First Script: Need some basic skill help? Can you add an image with a click?

    Hello, Im working on a project were you can replace people heads in a photo. Its for a project so its not supposed to be perfect. So far heres what i think the best steps to take are, but im not sure how to take the first scripting steps. How can i add an image with a script? How can i store a x y coordinates?
    1. I would create four variables and than store the XY cords of the the high point of the head, the bottom of the chin, amd the farthest right and left of the face.
    2. I would than add the image of the head that I would already have.
    3. If the x coordinates of the top and bottom are off kilter, I would rotate new head until = old face dimensions..
    4. I would also see if the width is too big or small and resize accordingly
    5. I would than resize the head so that the eyes would match up.
    Thanks for any help you can provide!

    Is that script for a browser html. Its not for Photoshop and like Photoshop would fine UiApp undefined so does Microsoft.  Is that a Chrome script or Android script? Why post it here?
    Atiqur Sumon wrote:
    function doGet() {
       var app = UiApp.createApplication();
       // The very first Google Doodle!
       app.add(app.createImage("http://www.google.com/logos/googleburn.jpg"));
       // Just the man in the middle
       app.add(app.createImage("http://www.google.com/logos/googleburn.jpg", 118, 0, 50, 106));
       return app;

  • Why can't I save a re-sized image in the new size and new dpi?  This just started happening 2 days ago.

    I haven't been here before.
    For some crazy reason when I try to save a re-sized image with a different dpi, PS6 indicates I have saved it.
    But if I go to re-open the same image, its in a different (but proportional) size and its original dpi. 
    I also have PS3 and if I open the re-sized image in PS3, it opens in the correct new size and the new dpi!!
    What's wrong with my PS6??

    Thanks but I don't think you understood the question so I'll be specific.
    I took an 8x12 image at 300 dpi (not ppi) and enlarged it to 20x30 at 240 dpi.
    I then did a "save as" for this larger size and it seemed to save properly.
    I closed the image.
    When I re-opened the image in PS6 it opened as 16.667x25 at 300 dpi, not the saved 20x30 at 240 dpi.
    That shouldn't happen.
    When I opened the same image in PS3 it opened as 20x30 at 240 dpi the way I saved it.
    So my question was why isn't PS6 opening the image as it was saved?
    I hope this is clearer.
    Thanks.

  • How to insert jquery script in DW CS5?

    Hi folks,
    I've always struggled with jquery scripts because I've never quite understood how to use them. I've installed extensions and widgets with no trouble but jquery scripts are just a little beyond my abilities so I'm hoping someone here can give me a step by step tutorial for using this script :http://minimalisticstudio.com/journal/360-degree-panoramic-view-plugin-for-jquery to insert a panoramic tour on this page, which is part of a templated site: http://tatlerprime.co.nz/prime_vt.html (replacing the current tours).
    This is what I have downloaded (screenshot): http://imm.io/p6mh (the readme file doesn't contain instructions).
    What I'm not sure about is where to save the contents and what to do next. The instructions at the first link expect me to have installed these previously so are not much help. I usually work in split view so am comfortable editing code once I know what goes where.
    Thanks in advance if anyone has the time to talk me through this.
    Jo

    Everything's there in the index.html file.
    If you want to transplant this to a Dreamweaver file, copy the links from the <head>
    <link rel="stylesheet" href="css/site.css" media="all" /> 
    <link rel="stylesheet" href="css/panorama360.css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="js/jquery.panorama360.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('.panorama-view').panorama360();
    $('.panorama .hotspot').click(function(){
    alert('Hotspot');
    return false;
    </script>
    and clone the <div> container structure, with the CSS classes, in the <body>

  • Is there a way to embed an image inside a script?

    I've a logo I use on a user interface.  Right now I'm opening the image from a file, is there a way to embed the image inside the script so I don't have to distribute the image with the script?

    xbytor, of the photoshop scripting forum has a tool kit that you can download & instal. The majority is to do with PS but part of that contains some conversions that 'may' be of use to you… See this recent post in the Photoshop forum…
    http://forums.adobe.com/thread/729330?tstart=0
    Not done this myself so if you have any problems you may be better posting back there… I probably won't be able to help…

  • Trouble with re-sizing images/textboxes InDesign CS6

    Has anyone had any problems re-sizing images or text boxes in InDesign CS6?
    I have been doing it for months by selecting the corners and dragging them in or out but suddenly it's stopped working. The arrow no longer changes to a double arrow when I hover over the corner and all I can see is an hourglass when I hover over any type of frame.
    I can resize images only be changing their percentage in the transform objects -> scale options.
    I tried re-setting my preferences and it didn't help.
    Please advise me if there is something else I can do. 

    Tried that and it didn't help.
    The only thing I can think of is that there is something wrong or slow with my remote desktop connection which is affecting functionality. No one else seems to have had this problem.
    Thanks for your effort though.

  • HOWTO and script: create and burn an UDF image with 4+GB files

    Most people think, creating UDF images with files bigger than 4GB or even 1GB is impossible, however it's not true! You just need udftools. Also you need to load loop and udf modules. There's a good howto by grigio, I also created an (admitably pretty poor) script to do it automatically, since grigio's howto doesn't include real dvd sizes:
    UDFPATH=$HOME
    echo -e "By default the udf image will be placed into your home directory. \n Do you want to enter an alternative one? (Enter y or n)"
    read yesorno
    if [ $yesorno == y ]; then
    echo "Please enter the directory you want to use: "
    read UDFPATH
    if [ -d $UDFPATH ]; then
    echo "Using $UDFPATH"
    else
    echo "Creating $UDFPATH" && mkdir -v $UDFPATH
    fi
    fi
    if [ $yesorno == n ]; then
    echo "Using default directory"
    fi
    if [ $yesorno != y -a $yesorno != n ]; then
    echo "Incorrect entry, aborting..." && exit 0
    fi
    if [ -e $UDFPATH/udf.iso ]; then
    mv $UDFPATH/udf.iso $UDFPATH/udf.iso.bak-`date +%y.%m.%d-%H.%M` && echo "udf.iso already exists! Backing up..."
    fi
    echo -e "Please enter your type of disk: dvd5p, dvd5m, dvd9p or dvd9m:\n(5/9 stand for normal/double layer disk and p/m for +/-)"
    read type
    if [ $type == dvd5p ]; then
    echo "Creating a 4,7 GB DVD+R image..."
    dd if=/dev/zero of=$UDFPATH/udf.iso bs=1024 count=4590208
    fi
    if [ $type == dvd5m ]; then
    echo "Creating a 4,7 GB DVD-R image..."
    dd if=/dev/zero of=$UDFPATH/udf.iso bs=1024 count=4596992
    fi
    if [ $type == dvd9p ]; then
    echo "Creating a 8,5 GB DVD+R image..."
    dd if=/dev/zero of=$UDFPATH/udf.iso bs=1024 count=8347648
    fi
    if [ $type == dvd9m ]; then
    echo "Creating a 8,5 GB DVD-R image..."
    dd if=/dev/zero of=$UDFPATH/udf.iso bs=1024 count=8343424
    fi
    if [ $type != dvd5p -a $type != dvd5m -a $type != dvd9p -a $type != dvd9m -a $type != cheat ]; then
    echo "Wrong type entered, aborting..." && exit 0
    fi
    mkudffs $UDFPATH/udf.iso
    echo -e "UDF image created in $UDFPATH/udf.iso. Want to mount it right now? (Make sure udf and loop modules are loaded)"
    read yesorno
    if [ $yesorno == y ]; then
    echo "Please enter the directory you want to use for mounting: "
    read MOUNTPATH
    if [ $UDFPATH = $MOUNTPATH ]; then
    echo "You can't mount the image to the directory it exists in!" && exit 0
    echo -e " Mount it yourself with 'sudo mount -o loop,user,uid=`id -u` -t udf $UDFPATH/udf.iso targetdir\'"
    echo " Afterwards copy your files, unmount the image and burn the dvd."
    echo -e " For burning you may just use 'cdrecord -eject -dao -dev=/dev/sr0 $UDFPATH/udf.iso'\n (the path to your DVD burner may vary!)"
    fi
    if [ -d $MOUNTPATH ]; then
    echo "Using $MOUNTPATH"
    USERID=`id -u`
    sudo mount -o loop,user,uid=$USERID -t udf $UDFPATH/udf.iso $MOUNTPATH
    echo "Copy your files, umount the image and burn the dvd."
    echo -e "For burning you may just use 'cdrecord -eject -dao -dev=/dev/sr0 $UDFPATH/udf.iso'\n(the path to your DVD burner may also vary)";
    else
    echo "Creating $MOUNTPATH..." && mkdir -v $MOUNTPATH
    USERID=`id -u`
    sudo mount -o loop,user,uid=$USERID -t udf $UDFPATH/udf.iso $MOUNTPATH
    echo "Copy your files, umount the image and burn the dvd."
    echo -e "For burning you may just use 'cdrecord -eject -dao -dev=/dev/sr0 $UDFPATH/udf.iso'\n(the path to your DVD burner may also vary)";
    fi
    fi
    if [ $yesorno == n ]; then
    echo -e "All right, then mount it yourself with 'sudo mount -o loop,user,uid=`id -u` -t udf $UDFPATH/udf.iso targetdir'\nAfterwards copy your files, unmount the image and burn the dvd."
    echo -e "For burning you may just use 'cdrecord -eject -dao -dev=/dev/sr0 $UDFPATH/udf.iso'\n(the path to your DVD burner may also vary)"
    fi
    if [ $yesorno != y -a $yesorno != n ]; then
    echo "Incorrect entry, aborting..."
    echo -e " Mount it yourself with 'sudo mount -o loop,user,uid=`id -u` -t udf $UDFPATH/udf.iso targetdir\'"
    echo " Afterwards copy your files, unmount the image and burn the dvd."
    echo -e " For burning you may just use 'cdrecord -eject -dao -dev=/dev/sr0 $UDFPATH/udf.iso'\n (the path to your DVD burner may vary!)"
    exit 0
    fi
    EDIT: Some major mistakes solved.
    Last edited by ku (2009-04-23 19:02:41)

    See the second article for how to look through a list of files in a folder.
    http://stackoverflow.com/questions/7854727/loop-over-video-files-in-folder-to-ge t-video-length

  • Navigating a zoomed image with shift+end... but using an action or a script?

    hello,
    i a have a crop script and with all my images i have to clean the floor...
    in that script the image goes to 200% zoom, them manually i hit "shift+end" to move to the bottom right of the image... so that i can clean that floor.
    can you help me automate the process with a script or lead me how to create the code?
    shift+end or shift+home using script
    thank you in advance
    Vitor Rompante

    Do you know how to code Photoshop Scripts in javascript.
    It is also impossible is Actions and  Script to give users complete manual control only interactive controls of a step is possible.    For complete manual control the script and actions need to be broken in to two actions or two scripts.  It can also be done by adding stops in actions that divide actions into part that can be used to continue execution after the stop and user operations.
    If its the just the bottom area you want to crop away its a relatively easy action to record. You would just inster a fit on screen menu item, record a select all,  then use menu select>Transform selection rotate the selection 180 and move up the bottom about 10 % commit the transform and finally record menu  image>crop. Stop recording the action and turn on the transform steps dialog to make the step interactive.  When the action is played the transform dialog bounding box will display and be interactive. You have control of the transform. If the recorded 10% bottom off is acceptable all you need do is hit enter to complete the crop.
    Try this one http://www.mouseprints.net/old/dpr/cropfloor.atn
    Crafting Actions Package UPDATED Aug 10, 2014 Added Conditional Action steps to Action Palette Tips.
    Contains
    Action Actions Palette Tips.txt
    Action Creation Guidelines.txt
    Action Dealing with Image Size.txt
    Action Enhanced via Scripted Photoshop Functions.txt
    CraftedActions.atn Sample Action set includes an example Watermarking action
    Sample Actions.txt Photoshop CraftedActions set saved as a text file.
    More then a dozen Scripts for use in actions
    Example
    Download

  • Script to Sort Images with/without Clipping Paths?

    I've searched for a while and can't find a script that will sort a folder of images into two new folders that contain images with and without clipping paths. Anyone have or know of a script that will do this for me? I'd would greatly appreciate it. W7, PS CS5 32 and 64 bit.
    Thanks in advance!
    Andy

    Hi Andy, Mike has a function to check for clipping groups but requires the file to be open...
    // Function: clippingPathIndex
    // Description: Gets the index of the activeDocument's clipping path
    // Usage: clippingPathIndex()
    // Input: None
    // Return: Index as Integer. -1 if there is no clipping path
    function clippingPathIndex(){
         var ref = new ActionReference();
              ref.putEnumerated( charIDToTypeID("Dcmn"), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
         var desc = executeActionGet( ref );
         var clippingPath =  desc.getObjectValue(charIDToTypeID("Clpg"));
         return  clippingPath.getInteger(charIDToTypeID("ClpI" ));
    I think it should be possible to check the files without opening them using Bridge, looking at the Photoshop File Format it says....
    If the file contains a resource of type 8BIM with an ID of 2999, then this resource contains a Pascal-style string containing the
    name of the clipping path to use with this image when saving it as an EPS file. 4 byte fixed value for flatness and 2 byte fill rule.
    0 = same fill rule, 1 = even odd fill rule, 2 = non zero winding fill rule. The fill rule is ignored by Photoshop.
    I will see if I have time today to put something together for you.

  • Script to Sort Images with/without transparency?

    I've made this a new thread because I posted a similar question that was answered correctly in another thread about a sorting script for images with and without clipping paths.. I'm hoping the trend continues. (I could probably modify the script myself if I knew the proper syntax for image transparency.)
    So, my question simply is: Is there a script that will sort images (in my case psds) into two separate folders, one containing images with transparency, and one with images with no transparency (or, no layers).
    Any help with this, as always, would be very very much appreciated,
    Thanks!
    Andy

    Another reason to create this as a new thread of course is to help anyone else who may do a search on this particular scripting need .

  • Action script 3: Export object to image with PNG format - make transparent

    Hi!
    I have a problem in export a object to image .PNG (and make transparent). When i add a object TextField in stage and add effect for my object. Then i export to image with format is .PNG.I use BlendMode.NORMAL properties of BitmapData to draw my image - work done and image is exported.
    I use BlendMode.ERASE properties of BitmapData to draw my image - is not word
    See more in attact file : BlendMode.ERASE.png, BlendMode.NORMAL.png
    Code text effect: \OnlyTextEff\view\textEffs.as and \OnlyTextEff\effects\EnvelopeDistord_2.as
    Code export image: \OnlyTextEff\view\textview.as (function name is "exportHandler")
    download demo: http://www.mediafire.com/?vgnauwspt8b6x08
    Does anyone have a good example or explanation of that ? Thanks.

    // that looks like a pretty poor tutorial.  but
    public function init(e:Event=null):void{
    go=new Go();  // you need to declare go
    addChild(go);
    go.addEventListener(MouseEvent.CLICK,startgame);
    public function startgame(e:Event):void{
    removeChild(start_mc);  // where start_mc is the movieclip of your start screen
    addChild(game_mc);  // where game_mc is the movieclip of your game

Maybe you are looking for