Photo Gallery w/ Images adjusting size based on Browser size.

I'm new to web design but I'm trying to create a photo gallery with images that dynamically size based on the size of the browser window. Similar to this http://pageduke.com/#/Residential/Colonial%20Revival-Nashville1/1. I know th is a flsh site, but is there a way yo do it in HTML in Dreamweaver, maybe using Spry. I don't know Jquery, but is it possible that way.
Thanks

Nancy,
Woo is not a gallery. It's just a slider - a panel widget, which should
be adaptive/responsive by default. The problem is that for years, the
typical jQuery plugin writer simply copies stuff done by others so
someone finally realized you don't have to fix a width and a height if
you know how to write a stub script
Galleries are totally different. To do a responsive gallery is not so
easy and the only ones that come remotely close - using open source
scripts - do require an initial width. They will not scale both up and down.
I gusess it depends on what the original poster wants and/or cares about
in terms of efficiencies and functionality.
[External commercial link removed]
Message was edited by: Sudarshan Thiagarajan. Please refrain from posting external links advertising/ promoting products & services.

Similar Messages

  • Photo Gallery thumbnails in business catalyst render in different sizes in different browsers

    Photo Gallery thumbnails in business catalyst render in different sizes in safari and chrome but are fine in firefox. What is the issue with Safari? I have tried the different algorithm options such as fill_proportional etc and firefox is the only browser that displays correctly. I thought safari was the most standards compatible browser - what's the problem here?

    Hi,
    If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
    So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below.  dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc.  My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
    First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
    function Albums()
    var myalbums = Spry.$$("#albums li", "TabbedPanels1")
    var rows = dsAlbums.getData();
    var setListener = function( element, value )
      Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
    for( var i = 0, length = myalbums.length; i < length; i++ )
      setListener( myalbums[i], i );
    Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
    function showAlbum(i)
    pauseShow();
    pImage = 'No';
    var rows = dsAlbums.getData();
    var albumid = rows[i]["albumid"];
    var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
    dsPhotos.setURL(url);
    dsPhotos.loadData();
    var rowcount = dsAlbums.getRowCount() - 1;
    var nextalbum;
    var navnext;
    var n;
    The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
    In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
    Regards
    Phil

  • NEWBIE: Flash photo gallery! Images are pixelated:(

    Greetings everyone. I created a Flash photo gallery using
    gifs. While most of the images are acceptable visually, a bunch of
    them are quite pixelated.
    I read online that I am supposed to use vector graphics
    whenever possible, but not all images where created as vector
    graphics.
    I have a few questions:
    If I create the image in illustrator, what format should I
    save it as to be used in a Flash gallery? If I create the image in
    Photoshop what format should I save it as?
    Lastly, is it true that Flash will load vector graphics
    quicker than gifs?
    Any info would be appreciated! Oh yeah, my site is
    inthemixgraphics.com

    if you create an illustrator file, actually drawing with the
    tools rather than just importing a bitmap and exporting it again,
    it will indeed give you a vector file you can work with. you can
    even export it as images that are readable by flash-- however,
    you'll get the best looking stuff if the vector is basically
    rewritten in flash. Import a (dot)eps file into flash, and break it
    apart. Look at how the objects maintain their shape.
    Now publish the thing and look at the bandwidth viewer. Is
    the filesize much smaller than if you imported the .jpg? It should
    be, but at least there is a way to check it.
    I get the most pixalation from images when I'm forced to
    scale .png's down by less than a perfect %. Its weird.
    If you're loading externally, I'm not entirely sure the
    correct process to bring an optimized vector in, as my thoughts are
    that it would be the actual size of the .eps image (or .swf if you
    can export to that) itself.
    --I hope this makes some sort of sense, and if it doesn't
    you'll have to forgive me.
    HmcH.

  • Site that automatically resizes images based on browser size

    Hi. I need to make a site that automatically adjusts the size of the images based on the browser size, but keeps the image quality. Does anyone know how to do this without using flash?
    I basically want the site to perform like [http://www.shotview.com/|http://www.shotview.com/] . Thanks for your help.

    first time accessing website get screen size info using javascript and then redirect to next page and store screen size info into session. then, when requesting pictures from browser use custom servlet, mapped to image extension, that renders images to different resolution.

  • Spry Photo Gallery Broken Image Link

    I have attempted to merge the spry photo tutorial with our church's website. The images simply won't show up. It shows a broken image icon, but I can't understand why. I am wondering if the menu bar's javascript is interfering. Here's the code:
    Photo Gallery Page:
    http://gtcdunn.org/GTWebsite/HTML/Gallery1.html
    XML
    http://gtcdunn.org/GTWebsite/photos.xml
    Spry Assets:
    http://gtcdunn.org/GTWebsite/SpryAssets/xpath.js
    http://gtcdunn.org/GTWebsite/SpryAssets/SpryData.js
    Thanks so much for your help!
    ~Chris

    I see you are still using Spry 1.5. Have you considered upgrading to 
    Spry 1.6.1?
    Also your XML is broken, if you open up your xml in a normal standards 
    complaint browser such as firefox, you will see that it doesn't render
    a normal tree view as it would do with other xml files. So i suggest 
    checking those errors out.
    Its mainly because you  forgot to close your starting tag of the 
    gallerys node. (<gallery
    base = ""
    background = "#FFFFFF"
    banner = "#F0F0F0"
    text = "#000000"
    link = "#0000FF"
    alink = "#FF0000"
    vlink = "#800080"
    before your xml starts.

  • Photo Gallery Copy Image from Album "A" to "B"

    I can copy the image. But cannot find a way to paste it into the new album. What am I missing?

    I was afraid of this. Painful. Am I correct that most apps that allow "insert an image) (Pages, Numbers, Notebook etc) will only LOOK at the iPad Photo Gallery for input?

  • Getting backround image to fit in all browser sizes

         I have an image of a baseball field that I would like to use as the backround of a website I am building.  The problem I am having is that the image doesn't adjust to the size of the browser if I shrink or inlarge the browser.  Is there a way to get backround images to autofit the browser with dreamweaver?

    No.  Background images are static.  They are the size that they are.  You can't make a huge background fill viewport in all displays so don't even attempt to use this as your body background image.
    The best backgrounds are small, seamless tiles or slices that you can repeat vertically and/or horizontally to fill the available viewport.
    More on Backgrounds:
    http://alt-web.com/Backgrounds.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Set font size based on component size

    Hi everybody,
    This is kind of a duplicate, kind of new, because my original post is buried and I figured out a more helpful and general way to ask this question. Does anyone know if there is a way to set the size of a string as large as possible on a component, but still be able to have the whole string visible, if you're using a font other than default?
    For example:
    public static void main( String args[] ){
    try {
              JFrame frame = new JFrame( "Title" );
              frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
              int guiWidth = width / 2;
              int guiHeight = height / 2;
              frame.setSize( guiWidth, guiHeight );
              Container pane = frame.getContentPane();
              // Create main label
              String labelString = "Test";
              JLabel label = new JLabel( labelString );
              label.setBackground( new Color( 179, 0, 0 ) );
              label.setForeground( new Color( 235, 191, 16 ) );
              label.setHorizontalAlignment( CENTER );
              label.setOpaque( true );
              label.setFont( new Font( �Old English Text MT�, 0, 48 ) );
              pane.add( label, BorderLayout.NORTH );
              frame.setLocationRelativeTo( null );
              frame.setVisible( true );
    } catch( Exception e) {
    e.printStackTrace();
         }As you can see, right now the font needs to be hard coded. I'd like it to be dynamic, based on the size of the screen the user has.
    Sorry if the partial double post annoys anybody; I figured it would be less annoying than resurrecting my old post.
    Any help on this would be great, and thank you!
    Jezzica85
    Message was edited by:
    jezzica85
    Message was edited by:
    jezzica85

    import java.awt.*;
    import java.awt.event.*;
    import java.awt.font.*;
    import java.awt.geom.AffineTransform;
    import javax.swing.*;
    public class DynamicFont {
        private JLabel getNorth() {
            // Create main label
            String labelString = "Test";
            final JLabel label = new JLabel( labelString ) {
                public void paint(Graphics g) {
                    ((Graphics2D)g).setRenderingHint(
                            RenderingHints.KEY_TEXT_ANTIALIASING,
                            RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
                    super.paint(g);
            label.setBackground( new Color( 179, 0, 0 ) );
            label.setForeground( new Color( 235, 191, 16 ) );
            label.setHorizontalAlignment( JLabel.CENTER );
            label.setOpaque( true );
            label.setFont( new Font( "Old English Text MT", 0, 48 ) );
            label.addComponentListener(new ComponentAdapter() {
                Font font = label.getFont();
                public void componentResized(ComponentEvent e) {
                    int w = label.getWidth();
                    int sw = label.getFontMetrics(font).stringWidth(label.getText());
                    double scale = (double)w/sw;
                    AffineTransform at = AffineTransform.getScaleInstance(scale, 1.0);
                    label.setFont(font.deriveFont(at));
                    label.repaint();
            return label;
        public static void main( String[] args ) {
            JFrame frame = new JFrame( "Title" );
            frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
            Container pane = frame.getContentPane();
            pane.add( new DynamicFont().getNorth(), BorderLayout.NORTH );
            frame.setSize( 400, 100);
            frame.setLocationRelativeTo( null );
            frame.setVisible( true );
    }

  • Flash photo gallery, popup image

    Hi!
    I'm new to flash.
    I have created a small flash thumbnail gallery. What I would
    like to add now is that when you click on one of the images, a
    bigger version of the selected image appears as a popup. At least
    it looks that way.
    How is this done?
    Does anyone have any tutorial or example to look at?
    Thanks

    the thumbnail (or its unique parent if you setup this up
    without fore-thought) should be a movieclip that stores a reference
    to the larger image's path.
    search google for flash gallery tutorial. there are bound to
    be lots of tutorials.

  • Font size based on screen size

    How to set different fonts for a textblock or for other controls in a page based on the screen resolution

    Additionally, a MSDN documentation for you:
    Supporting multiple screen sizes also
    Scaling to pixel density for your reference.
    --James
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • Dynamically modify the crystal report field size based on Paper size in C#

    Hi,
    I need to modify the Crystal Report field size dynamically based on the paper size using C# .Net. According to the paper size, crytal report field width should be increase or decreae.
    Kindly suggest any solution on this.
    Thanks

    Moved to .NET SDK forum
    See these RAS samples:
    http://wiki.sdn.sap.com/wiki/display/BOBJ/NETRASSDK+Samples#NETRASSDKSamples-Exporting%2FPrinting
    Don

  • Text size/text in browser size wrong (ff22)

    There are some problems with my Firefox 22.0 since yesterday.
    It started to show websites' text too large, had to use Ctrl and "-" every time I accessed any website. However, things how text looked in FF menus did not change. My actions:
    1) FF forums. Opened config, searched for that numbers - there they were, unchanged.
    2) control panel-->screen resolution-->Make text larger or smaller-->set to 100%
    3) Monitor set to 75 Hz (no higher values) and True Color (32 bit)
    PC responded I needed to log off. Turned PC off, then turned on.
    Everything started to look small (text on a browser kind of hard to read), but hooray - websites are normal again. Tried to use 125% - no, websites are displayed wrongly big again.
    edit: My WIn7 did not find any updates for monitor; same for Nvidia video card. WIndows updates are all installed.
    Problem about disproportion between text in FF menus and website text still appears. Would be very gratefull for any solutions.

    Code changes regarding HiDPI support for high resolution displays have landed in Firefox 22 and later (bug #844604).
    You can modify the layout.css.devPixelsPerPx and increase or decrease the value in 0.1 or 0.05 steps to adjust the size of fonts and other elements in Firefox.
    The layout.css.devPixelsPerPx pref is a String value parsed to a float and allows to fine tune the dimensions of all elements (user interface and web pages) more precisely (resolution 0.1 or 0.05).
    Change the default value -1 to 1 to make it work like in previous Firefox versions (100%)
    Start with a value of 1 and adjust this value with 0.1 steps or 0.05 for finer adjustments.
    Use values between 1.0 and about 0.5 to reduce elements in size (do NOT go all the way to 0.05!)
    Use values greater than 1.0 to magnify and make elements larger (percentage divided by DPI, % / DPI).
    http://kb.mozillazine.org/about:config
    If web pages needs to be adjusted after changing this pref then you can look at the Default FullZoom Level or NoSquint extension.
    Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
    NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/
    Use this extension to adjust the font size for the user interface:
    Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/

  • Native swf stage size vs. native browser size

    I want to be able to click on a link - http://fms.example.com/swfs/file.swf  in an email, for example and have it open up in a web browser in its size that was set in flash, not open up full screen in a browser.  any suggestions?

    As I said, you could probably create one php file that is used for all, feeding it the swf filename with the url so that the php can process it into the code. You should even be able to weave a db into the picture in the event the file sizes vary, such that the php queries the db for the file WxH data and then writes the page code.

  • Web Photo Gallery - Photoshop CS 8.0 (WinXP) -  Please help!!!

    Hello all,
    I'm using Photoshop CS 8.0 on WinXP, but when I load images for Web Photo Gallery, it shows the error as: "This is an error disbling controls for missing tokens. Some files or folders for selected style might be missing."
    I don't know what happens and please show me how to fix it. I need here very urgent for my works.
    Thank you very much for your strong support and paying attention.
    Thuydinh.

    Bob,
    Thanks for answering.  I need to create a Web Photo Gallery so I can upload thumbnails and full-size pictures to my website and have viewers be able to download the full-sized pictures.  The Flash version does not permit downloading and requires that you use one of the provided templates.  It appears that Photoshop Elements 8 is a downgrade from Photoshop Elements 2.0 in this respect.  Is there any way to accomplish what I want to do with Photoshop Elements 8.0?
    By the way, I really like your video tutorial on the Adobe website.
    Phil Fleming
    Philip E Fleming MD FACS
    < personal info removed by forum host for security >

  • Adobe Photoshop Elements 12: Create Web Photo Gallery

    Adobe Photoshop Elements 12: I need to create a Web Photo Gallery so I can upload thumbnails and full-size pictures to my own website. Does anyone have an idea? No Facebook, Flickr, Adobe Revel etc.

    Barbara, thank you very much. I really miss it. I have tested jalbum. It's great.
    PSE 12 should also offer something like this.

Maybe you are looking for