Expandable Images

Hi,
The website I'm creating is going to have a gallery section. I want to have the common effect where the images are displayed as thumbnails, but expand to full size when clicked and the background becomes grayed out.  Here's a good example of what I'm trying to do:
http://www.djahalland.com/en/gallery
Does anyone know how to get a similar effect? I don't know any real programming or code (I've been using the method where you create the layout in Photoshop, slice it into multiple images, then insert the images into a table in Dreamweaver).
I'm not sure how difficult this "expandable image" effect is, but any help would be appreciated.
Thanks!

Try any of the freely available Lightbox scripts:
http://www.google.com.au/search?q=lightbox
Most come with step-by-step instructions.

Similar Messages

  • Thumbnails and expanded images

    Am building a website in JSC for a realtor who wants to sell properties through it. I'd like to be able to have property thumbnail images, which on selection by a user, are expanded to true size and appear in a separate web page.
    Any pointers?
    Regards, Paul.

    Hello.
    You can use Image Hyperlink component. This component can display both text and an image.
    Create on main page some Image Hyperlink components and set them url property to pages with big images.
    Hope this helps.
    Maks.

  • Can I use Indesign to create an ePub for iPad with expandable images?

    Hello everyone!  I'm creating a book for iBooks on the iPad.  It is a basic book that has short chapters of text with pictures. Reading Terry White's, the Adobe evangelist, blog I saw that his attempt with InDesign seemed straight forward, without a need for html skills (which I don't have.)  So I would make the investment in InDesign if it is suitable.
    BUT! I would like to add an extra feature that I have seen in some iBooks: When  you double-tap an image the text disappears and the image expands and  fills the page. And when you double-tap the image again it goes back to  normal. Can this be done in InDesign? How?
    I'd appreciate any help.
    Thank you!      

    Size your image so that the longest dimension is 1024 pixels.
    Screen size of iPad is 1024 x 768.
    In iBooks, when a user double-taps on an image, iBooks will open the image in full-screen view and scales the image to its largest dimension.
    In normal book view, iBooks displays all images at their maximum size unless they're larger than the iBooks page, in which case they are displayed to the max width or height of the page (until double-tapped on).
    You can constrain the image size in iBooks with certain HTML coding. (Unlike other epub display software and devices, iBooks ignores CSS height and width instructions unless you make specific use of a <div> tag.)
    More info here:
    http://www.pigsgourdsandwikis.com/2011/04/resizing-images-in-epub.html
    http://carijansen.com/2011/06/07/epub-export-relative-to-page-size/

  • Tabbed links with fade to expanded image with hotspots

    The description pretty much says it all. The page I'm creating will feature several tabs around an interior text area. When the tabs are rolled over, an image will fade in next to it, with two hot spots linking to other pages. There will be ten tabs, and each tab will activate the faded-in image, and each image will give a choice of going to one of two pages. I've tried fade/appear on an AP div, but the fade does not "hide" the div, it only makes its opacity zero.
    What I'm trying to do seems like a standard menu function, but all the possible solutions available seem to want greater complexity. If you want to see what the page will look like go here: http://cardsforliving.com (for a static image only). Please help. If you can, please e-mail me at jay(dot)mcpherson(at)gmx(dot)com and if necessary we can set up a Skype conversation from there.
    Thank you!

    If I understand you correctly, you would like for a box to appear on a hover.  If that is the case, do a search for tooltips, you should find plenty there.  You can also use a dis-jointed rollover.
    Look at those two options, it sounds like what you are looking for.
    hth
    Gary

  • How to expand image to use entire drive

    ZfD 7. I'm taking an image of a PC, installing a larger hard drive,
    and then putting the image on it. How do I tell it to use the entire
    drive? I'm sure there is a way, but I can't find it.
    Thanks,
    Ken

    On Tue, 20 Apr 2010 06:47:02 GMT, Shaun Pond
    <[email protected]> wrote:
    >KeN,
    >
    >simplest way is to edit the zmg with image explorer and update the
    >partition info - make it bigger than your biggest disk
    That is what I needed! Thanks Shaun!
    Regards,
    Ken

  • Image "drag & drop" saved as .bmg instead of .jpg

    Hi.
    Now, recently I was trying to drag and drop some picture to my desktop and I found out that it started to save the image as bitmap instead of jpg.
    Any idea how to fix?

    This might be happening if the images aren't in the cache and Firefox uses the expanded image that is currently in memory.
    Make sure that the cache is enabled and working, see the about:cache page.<br />
    Firefox also has a separate image cache, but I do not know how that cache works.

  • Images in PDFs are too dark - wrong color, brightness, contrast

    I use my IPAD mainly for viewing medical books, e.g. radiological atlases. Most come in PDF format and most don't look much different on the IPAD than they do on PC. But it is very frustrating to find that the most important book I need looks incredibly bad on the IPAD - it's color reproduction of images is very poor compared to the PC. I've tried all possible viewers, the problem must be in the PDF rendering engine of the IPAD.
    Is this problem already known and is there a solution?
    Thank you for your help.

    Hi, did anybody read my fix to the problem from 19.09.2011?
    Here is another one I found on ipadforums.net:
    Fix to PDF Image problem
    Little after the fact, but in case any one googles to this like I did, I did find a work around for this. Only on a mac... I am running Lion and I simple Save as in Preview didn't do the trick for me.
    Two options, One a little easier then the other.  1. Open the file in preview. Chose File-> Export. Set the obvious and then under quartz filter select reduce file size. Then hit save. Put the file on your iPad and you should be good to go. This will also circumvent and "large" file size issues you may get from other ways to "fix" this.  2. If you need to have the images in even higher quality, as the first option may decrease the quality slightly then there are more steps.
    Select the file you need and choose open with-> ColorSync Utility. Top left of the screen is the button to open filter inspector (three circles, one green, blue and red). Click the downward triangle next to Reduce file size and select duplicate. Rename the copy to anything and then Press the downward triangle on this file. Select Add domains. Then Expand the field (triangle on the left of the name). Expand Image Expansion. Change the quality bar to max. Expand Domains and check PDF workflows. Close the filters box.
    On the bottom of the original screen that was opened there is a filter option. Select the file you just created and click apply. Then save the file and you are good to go with a higher quality.  This will fix any color issues with pdf images on iPads. I had pdf images that the colors were off on, almost negative and this worked like a charm. Once its set up its very easy and quick for future pdf image problems.

  • Image Swap + Click Image Swap & Restore Help

    Hi everyone,
    I'm having trouble figuring this out and was hoping someone could help me with the code. What I currently have is a world map for my books. What I want is to have several hotspots that change the image (the world map) in five ways.
    1. When the mouse goes over a continent it swaps the image of the continent with a rollover, letting you know that continent is clickable.
    2. When the mouse goes out of the continent it restores back to the original image of the world map.
    3. When you click the continent it swaps to a "zoomed in" image of the continent.
    4. The image in #3 (zoomed-in) stays on screen until clicked. Once clicked it then returns to the original image (the world map).
    5. When the continent is double-clicked it sends you to a separate browser with that continent.
    I've got all of them figure out except for #4. As soon as the mouse moves out of the hotspot, the "zoomed-in" image returns to the original image.
    Here is the link to what I have so far: http://christopherdeldridge.com/Photo%20World%20Map.html
    Here is the code I have for one of the hostpots for one of the continets:
    <area shape="poly" coords="335,145,310,134,280,137,255,141,231,144,196,147,170,143,132,146,127,174,144,188,1 64,211,188,211,208,213,231,216,265,217,272,234,295,240,316,227,343,225,357,241,368,226,364 ,203,347,195,315,196,288,198,264,202,246,200,241,171,288,163,315,156" alt="" style="cursor: pointer;" onclick="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map 2/WestVadra 2.gif',1)" ondblclick="MM_openBrWindow('Vadra Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map/WVadra.gif',1)" onmouseout="MM_swapImgRestore()"  />
    Thanks for the help...

    While looking through your code I see several things you should change:
    1.  Your CSS is flawed -
    <style type="text/css" media="all">
    <!--
    .hiddenlink {
    color: #000; /* same color as the surrounding text */
    text-decoration: none; /* to remove the underline */
    cursor: auto; /* to make the cursor stay as the auto cursor, not the hand */
    -->
    <style type="text/css">td img {display: block;}
    .auto-style1 {
    Note that the .hiddenlink rule does not have a closing "}", and that there is an improper opening <style> tag embedded there immediately before the 'td img' rule.
    2.  I also note your liberal use of file/pathnames containing spaces - this is a bad practice as some browsers will assume that a space is the end of the file/pathname.
    Anyhow, I have not tested this but it should work.  You need to set up a toggle on the onclick event call so that you can know which image to load, like this -
    <area shape="poly" coords="622,367,592,366,566,373,542,381,527,391,531,407,556,421,592,424,622,411" alt="" style="cursor: pointer;" onclick="if(alekandria==1){MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria 2.gif',1);alekandria=0;} else { MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria.gif',1);alekandria=1;" ondblclick="MM_openBrWindow('Alakandria Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map/Alakandria.gif',1)" onmouseout="MM_swapImgRestore()"  />
    So - when you click on the image, the value of the toggle (a variable specific to that particular image) is tested.  If its value is 1, the image has already been expanded, and you need to swap in the unexpanded image.  You also set the value of the toggle to 0.  If its value is 0, the image is unexpanded, and you need to swap in the expanded image.  You also set the value of the toggle to 1.
    Get it?

  • Default image viewer

    how do i make fireworks my default image viewer?

    It's probably better to remove the file type association in
    QuickTime
    (or QuickTime Pro(?)).
    Try:
    1 - start QuickTime
    2 - Edit > Preferences > QuickTime Preferences >
    File Types > expand
    Images option in the tree structure > remove the tick next
    to images as
    you wish.
    It seems an old version of QT?
    AFJ786 wrote:
    >
    quote:
    What application is keeping the links and preventing
    Fireworks from being
    > associated?
    > Its an application that came with my computer and was
    automatically set as the
    > default image viewer for JPEG images. The name is Quick
    Time Picture Viewer
    > 2.0.4.55. This application has been giving me problems,
    like freezing my
    > computer when opening this application, and I am trying
    to remove it, but I
    > cant seem to find it in the Add or Remove Programs.
    >
    > Any help is appreciated!
    >

  • Reducing image compression on iPad2

    Like other users have noted on this forum, still images recorded on the iPad2 are really grainy. This is more than low light... I was trying to take some pictures of my wife holding our first grandchild today in good light and was reminded how much I hated this camera. I emailed the image from the iPad-2 to my gmail account and opened it in ImageJ. The RGB image is 960x720 px. An uncompressed TIFF version is 2073754 bytes, a 154 byte header and the expected 960x720x3 bytes of data (1 byte per color record). The jpg from the camera is only 292303 bytes - only 14% of the size. This is quite a lossy compression!!! Storing this same image as a PNG with a lossless compression, results in an image that is 1452130 - or 70% of the uncompressed size. Most serious image processing programs (including ImageJ) permit the user to specify the JPG "quality" - i.e. compression ratio as an integer from 1-100. The higher the value, the lower the compression and the better the quality. The artifacts from the discrete cosine transform used by the JPEG compression are easily visible in the expanded image.
    I spent some time looking through the settings for the camera on the iPad2 and cannot find any way to reduce the compression to get better images. Although I looked through many menus, I could have missed something... Has anybody found a setting to change the compression of the still images from the camera? Surely the Apple developers did not hard-code this important parameter. But I sure couldn't find a way to change it...

    We may split packages and move the unnecessary images out
    This includes stuff like icon themes and wallpapers and any other graphic that is not important
    If Arch has something like USE = " . . . ." in Gentoo then we may make use of it there
    Like we have Kdemod on a separate mirror with packages named kdemod-* we may build a mirror for graphics - reduced packages
    Users with slow connection will install their DE from there. Anyway the bottle neck will be in their connection and not the server so few mirrors will do
    If they want to add graphics to some package they may uninstall it and install the standard package instead

  • Problem changing fill colour after image trace?

    I am using illustrator cc 2014 to trace a jpeg image. After tracing I want to change the colour of the resulting image. The default colour after tracing is black but the image fill colour is showing as a question mark and when I go to change the colour the whole artboard turns grey no matter what colour I choose. I know the document is in CMYK. Does any one know whats going on here?

    Hi I'm still having trouble with this here are a couple of images of the before and after.
    This is the traced and expanded image:
    And after I select a colour:
    There are two problems with this, first is that its gone grey (I'm definitely in CMKY mode) and second is it did not fill the image in the way I had intended.
    What am I doing wrong?

  • Is it possible to make the TOC expand and collapse icons larger?

    OR to have the TOC expanding and collapsing by usage of a self made buttons?

    You can use graphics that are slightly taller, but not wider.
    If you go to this page and take a look at the example named Supply Chain Management, you will see that I have used a different TOC expand image that is slightly taller:
    http://www.infosemantics.com.au/portfolio
    I had originally tried to use a larger image but it appears that Captivate limits the width.
    You can use the On Success action of a button to assign the value of the cpCmndTOCVisible system variable to 1 or 0 to open or close the TOC.  You can create a toggle action using a Standard or Conditional action to make the same button alternately open or close the TOC each time it is clicked.

  • Actions and Image Trace

    Hello,
    I'm doing some work that requires line art to be created from simple grey-scale images. I am using Adobe Illustrator Creative Cloud as well. What I'm wanting to do is create an action that utilizes the image trace feature to help speed up the processes. The problem is, I cannot change the settings in the image trace section inside (it just uses the default setting in the image trace) which just creates a white image (usually a square) and doesn't actually trace around my image. What I'm wanting to do is be able to select the silhouette preset and have that command be sent to my action macro.
    Here is what I'm wanting my Action to look like
    - Rasterize Layer
         - Defined Settings
    - Image Tracing
         - Switch to Silhouette settings rather than Default (this is where I can't change the settings)
         - Make image trace
    - Expand Image
    It's not that complex, but I can't seem to get anything to work. I've done a lot of hunting around and I really haven't been able to find anything to help get me started on trying to figure this out. If anyone has any insight please let me know!
    Thanks!

    PhotoLady,
    If you have Windows, I believe they are if nothing to the contrary is indicated.
    May I ask which 8 and which 4?
    It seems that there may be something else causing the issues.
    Unfortunately, our forum staff friends have been absent since the forum change.
    The following is a general list of things you may try when the issue is not in a specific file (you may have tried/done some of them already); 1) and 2) are the easy ones for temporary strangenesses, and 3) and 4) are specifically aimed at possibly corrupt preferences); 5) is a list in itself, and 6) is the last resort.
    1) Close down Illy and open again;
    2) Restart the computer (you may do that up to 3 times);
    3) Close down Illy and press Ctrl+Alt+Shift/Cmd+Option+Shift during startup (easy but irreversible);
    4) Move the folder (follow the link with that name) with Illy closed (more tedious but also more thorough and reversible);
    5) Look through and try out the relevant among the Other options (follow the link with that name, Item 7) is a list of usual suspects among other applications that may disturb and confuse Illy, Item 15) applies to CC, CS6, and maybe CS5);
    Even more seriously, you may:
    6) Uninstall, run the Cleaner Tool (if you have CS3/CS4/CS5/CS6/CC), and reinstall.
    http://www.adobe.com/support/contact/cscleanertool.html

  • ITunes, iPhone, will not work on Vista with DEP !!!

    I am having a problem with the latest version of iTunes. If you have Data Execution Prevention (DEP) turned for "all programs and services" iTunes will lock up when you go to click on the iPhone tab in the iTunes preferences. You receive an error that Apple Mobile Device Helper has stopped working. Probably, this a new module added to iTunes for the iPhone and was not tested with DEP. The application wants to access the hardware in some way. When this happens you have to force close iTunes.
    You can turn DEP on just for "essential Windows programs and services only" for an intern solution to the problem. I have not tried but I think we might have to add the apple mobile helper exe to the list of allowed applications in DEP.
    I hope the apple engineers are reading the form and can look into this problem.

    If your iPhone isn't being recognized in iTunes on Windows but is being recognized by your computer (can you see it in My Computer?); rather than remove/reinstall things over and over (which is an 'I hope it fixes itself' approach) just ensure that your iPhone can communicate with iTunes.
    The iTunes installer isn't a very effective piece of software as you're probably noticed.
    There overview of what we're going to do is:
    1) We're going to make sure Apple's Mobile service is installed. By extracting the install file from the main setup file using WinRar.
    2) We're going to make sure that service is started.
    3) We're going to make sure the iPhone is using the right driver to talk to it.
    You'll need to use the Device Manager, Services Manager and install WinRar. If these steps are too complex for you, just ask a friend to do them.
    Start by closing iTunes and pluggin in your iPhone with the power on.
    1) Now Make sure Mobile Service is installed (steps these follow)
    a) Have a copy of the iTunes 7.5 setup file (download it if you don't have it)
    b) Download winRar and install it.
    c) After winRar is installed, right click the iTunes setup file (iTunes75setup) and choose extract to iTunes75Setup\
    d) Go into the newly created iTunes75Setup folder
    e) Double click AppleMobileDeviceSupport (.msi)
    f) Install it
    2) Make sure Apple Mobile Device serve is turned on via Services.
    a) Go to start, run
    b) type in services.msc and click ok
    c) Find Apple Mobile Device, right click and choose start (or restart)
    3) Install the correct driver for the iPhone via Device Manager
    a) Go to start, run
    b) Type in devmgmt.msc and click ok
    c) Expand Imaging devices and right click Apple iPhone
    d) Choose Update Driver
    e) Choose 'No, not this time' radio, click next
    f) Choose 'install from a specific location (advanced)
    g) Choose 'Search for the best...'
    h) Uncheck Search removable media...
    i) Check Include this locaiton in search
    j) in the text box type/paste the below line:
    C:\Program Files\Common Files\Apple\Mobile Device Support\Drivers
    If any of the driver update steps are missing or differ on your system but you see the Apple iPhone device, then you can try to change its driver to the driver in the above listed folder using whatever steps yours shows.
    If you're using a foreign Windows then the word 'Program Files' may be something different like 'Programmer' so change it accordingly... You can always click browse instead and manually find the folder.
    k) click next, then after it installs click Finish.
    Now you can open iTunes and it will be able to detect and talk to your phone.

  • Recognized in iTunes, but not as a camera in "My Computer"

    I have a PC, running Windows Vista Home Premium (64 bit) SP1.
    When I plug in my iPhone 3GS, it shows up in iTunes just fine. But I want to copy some pictures to my computer. It used to show up as a drive (with subfolders and files) but not anymore. What do I need to do?

    Reinstall Apple Mobile Device USB Driver:
    1. Attach your iPhone
    2. Open Device Manager: Right click on My Computer and select Properties from the drop down menu. This will open System Properties. System Properties opens on the General tab so you will need to click on the Hardware tab.
    3. Remove iPhone USB Driver called Apple Mobile Device USB Driver. We want to remove this driver by expanding the list of USB drivers which can be done by clicking the + next to Universal Serial Bus controllers. Now right click on Apple Mobile Device USB Driver and select Uninstall from the drop down menu. Click the OK button on the pop up confirmation window.
    Confirm Device Removal: Apple Mobile Device USB Driver
    4. Reinstall iPhone Driver:Once the driver has been removed you should unplug the iPhone from the USB cable. To reinstall the iPhone USB driver plug it back into the USB cable and the reinstalling of the driver will start automatically. Once you see the pop up message confirming that your new device is ready to use everything should be working properly again.
    5. Verify iPhone Camera Detected: Open My Computer now to verify that the iPhone is displayed and you can click on it as you previously were able to do.
    Another way you can verify the driver is reinstalled properly is to open Device Manager and expand Imaging Devices. You should now see “Apple iPhone” displayed.

Maybe you are looking for