Display a diagonal image on web page

Posted on 2009-02-20
Last Modified: 2012-05-06
I have a webpage that pulls 4 images based on a database search and displays them.

What I now want to do is display these images at different angles as if they were polaroids pics hanging from pegs on a piece of string.

My first guess is that I would need to use Flash to do this, however I've never really got into the whole Flash thing so have no idea where to start and if this can be easily integrated with my current ASP code which pulls the image names from the database.

If there is a non-Flash way to do this then i'm open to that too.

Any ideas?

Thanks in advance,

Question by:RobPal
    LVL 7

    Expert Comment

    The only other way i can think of you doing this (without flash) is by making the image look like its diagonal (rotate it in an image program) then save it as a PNG with a invisible background...

    My £0.02 :)

    LVL 28

    Accepted Solution

    Maybe not precisely what you want, but it comes close.

    LVL 5

    Author Comment

    Animasu - Thanks for the input but I would need to do this on over 500 images and they could change frequently therefore your suggestion unfortunately is a bit impractical for my situation.  But thanks anyway.

    Sybe - This looks like it could be what i'm looking for.  I'll give it an extensive test and if it works then the points are yours.

    Cheers all, any other suggestions still gratefully recieved though.

    LVL 16

    Assisted Solution

    Hello RobPal,

    my ?0.01 opinion is as follow.

    It is possible to apply a Polaroid and tilt effect with this library.

    The rotation is hardcoded in the instant.js file (serach for tilt==). I'm sure you could be inspired by this library and provide an angle as opposed to a direction for the titl parameter. Currently the value for tilt are n,l or r.

    Let us how you get on with this option if you decide to go this way.


    LVL 5

    Author Comment

    Thanks alain34, i'll give this one a go too, it looks good.
    LVL 5

    Author Closing Comment

    Thanks guys.  I haven't got round to being able to test these solutions yet but I don't see the point in hanging around with the points as i'm sure that i'll use both of these scripts soon enough.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now