Dynamic Spry Photo Gallery Thumbnails

I'm implementing the XML version of the Spry Photo Gallery. I
need to edit the size of of the thumbnails and make them larger,
roughly 100x130 or maybe a little smaller. Since I have so many
photos, I was planning to use CSS to handle the overflow with a
scrollbar. I noticed sizing occurs in the Index file, Gallery.js,
and in the XML file. Are there any others that im missing? I'm
having a problem with resizing them, they dont resize when I adjust
the size in those places. Any suggestions would be appreciated.
Thanks
link (select Tattoo from the dropdown):
http://www.bugsartwork.com/beta/gallery/index.html

I overlooked screen.css, there was some css that was setting
the thumbnail img tag.

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

  • Tutorial for a Spry photo gallery with thumbs and buttons ???

    Anyone know of a a tutorial for building a Spry photo gallery with both thumbnails and next, previous, stop and play buttons(functions)  ???
    Like the ones on Adobe's Photo Gallery demos; http://labs.adobe.com/technologies/spry/demos/pe_gallery.html
    Adobe show the source for their Photo Gallery Demos, but that doesn't help me much ... I need a prober tutorial that tells me how to do : ) 
    The only tutorial that I've been able to find, is one for Dreamweaver 8, without buttons - I'm looking for a updated version.
    I appreciate any help very much. Thank you.

    Just Google for the Spry photo gallery and you might find
    http://cates-associates.net/tutorials/Tutorial-CS3-Spry.html
    or even a few others.
    Happy Sprying
    Ben

  • Spry Photo Gallery Image Size via CSS

    Hello!
    I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
    Thank you for your help!!!
    Kind regards,
    Joerg

    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.

  • Spry Photo Gallery "Controls"

    Spry Photo Gallery “Controls”
    Hi Don Booth, David Powers, Kinblas et al,
    Thank you all for your commitment, and  I hope Spry isnt dead?! 
    I am years behind  but I antē d up for the CS4 Master Collection at the beginning of the year and have been plowing through the many written and tv.adobe tutorials on the various programs.  Some confuse so it was a pleasure to come to the straight forward instructions in Don Booth’s Photo Gallery that worked first time!
    Forgive me however but although I have spent the last week perusing the forums (getting to know you all so well!) I can’t find any thread to help me to correctly add the “transport” “controls” div’s and bind them so that I get a better response to next/play/pause. I did find one detailing how to de activate the SlideShow Navigation - by deleting the container!!  V1 Oct ’07.
    As it seems to me there is nothing out there (in the Forum(s)) I assume this must be a simple case of ignorance on my part, and,- I feel stupid - I must be lagging way behind - for which I humbly apologize and ask for your help, thank you in anticipation.
    http://www.portofinobayside.com/Gallery.html#   (simpleTest - your images)
    Tunedup

    I've set up the photo gallery demo -china,paris,egypt- and
    made a swap of a couple of my photos from in Dreamweaver's property
    box src for thumbs, and link for the large pic. It works in Safari
    and Opera but not in firefox and I don't know about IE as I'm on a
    MAC and not that for into it yet.Is there something to look for in
    the code? It shows no browser issues when I test for compatability?
    I'd really like to use the xml version but I have tried and had no
    luck except in Safari.

  • Spry Photo gallery

    Can anyone point me to a free download of all the files for
    the fancy Spry Photo Gallery demo that is on adobe's website. The
    basic tutorial is good but I am stuggling to add the fancy
    fade/appear and hover elements and also the ability to load
    multiple galleries.
    Thanks

    You might find what you are looking for in the demos/gallery
    folder of the downloaded Spry 1.6 code. This is the same gallery
    you can find at
    http://labs.adobe.com/technologies/spry/demos/gallery/
    Let me know if that is not what you wanted...

  • Spry Photo Gallery not viewing

    am new to web design and followed this tutorial to make a
    Spry Photo Gallery:
    http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html
    I am using Dreamweaver CS3 and when I preview my files,
    everything is perfect and in place. When I upload everything and
    view it on the server, no photos show up, and all of my div layers
    are out of whack or missing even.
    Any ideas, suggestions?? I feel like I am missing something
    really simple.. THANKS!
    http://www.summerinchicago.com/photoGallery/gallery.html
    http://www.summerinchicago.com/photoGallery/photos.xml
    http://www.summerinchicago.com/photoGallery/includes/SpryData.js
    http://www.summerinchicago.com/photoGallery/includes/xpath.js
    http://www.summerinchicago.com/photoGallery/images

    I've set up the photo gallery demo -china,paris,egypt- and
    made a swap of a couple of my photos from in Dreamweaver's property
    box src for thumbs, and link for the large pic. It works in Safari
    and Opera but not in firefox and I don't know about IE as I'm on a
    MAC and not that for into it yet.Is there something to look for in
    the code? It shows no browser issues when I test for compatability?
    I'd really like to use the xml version but I have tried and had no
    luck except in Safari.

  • Spry Photo Gallery - How to add links to images

    I was wondering if any one knew how I could add individual
    links to images on the spry Photo Gallery—An XML-based photo
    gallery. I need each image to have its own individual link when
    clicked on. Any assistance would be most helpful.

    Hi,
    In the dashboard --> edit option u can see dashboard object here u can see folder ...by this folder u just include dashboard page other wise in the catalog share folder u need create each and evry module pre planned folder then save it each dashboard pages to relevent module folder.
    THanks
    Deva

  • Customise button wording for 'NEXT' that appears with Photo Gallery Thumbnails

    Is it possible to customise the wording of the 'NEXT' button that appears with the photo gallery thumbnails? ie, if you only have 5 thumbnails on page, but the gallery has more pics, a NEXT button is generated, but we'd like it to say MORE IMAGES instead....

    thank you!

  • Troubleshoot Main Image for spry photo gallery

    Hello, I am modifying some spry files to see if I can get the
    hang of it using my images. I have taken the photo gallery files
    gallery.js
    SpryData.js
    SpryEffects.js
    xpath.js
    The folder structure contains images and thumbnails on the
    root folder as well as the ap.css sheet and photos.xml
    The page is
    http://www.proximita.com/learning/index.html.
    Since I only have 1 photo gallery (and I did the getting
    started tutorial and worked fine I wanted to add the slideshow
    effect in the spry demo functionality) I only have one xml doc and,
    as mentioned, the both image folders and the css sheet are on the
    root, and the all the js files are in an includes folder.
    The thumbnails show up fine, but, the main image does not
    show up at all. I am almost sure this is a bad reference somewhere
    or a begginners mistake but I cant find it.
    I did modify the gallery.js because it referenced 2 or three
    variables (like dsPhotos and dsGalleries that are used for the demo
    I only have dsGallery) and I cahnged all of the other refrences to
    dsGallery.
    I think I am having problems here:
    function ShowCurrentImage()
    var curRow = dsPhotos.getCurrentRow();
    SetMainImage("galleries/" +
    dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
    curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
    you can check out the whole code here:
    http://proximita.com/learning/includes/gallery.js
    Im unconcerned with appearance for the moment, and would just
    like to see the main image and the slideshow functionality.
    If you can help, please do. Thanks, Mario.

    yes, I suspect that is because the tutorial talks about
    building this from scratch and uses that name for the "thumbnails"
    div rather than what they actually use in the demo files...
    confusing, to say the least.
    It would be nice if there were a simple document with demo
    files that didn't include other stuff unrelated to JUST the slide
    show (gallery)... and if the whole layout were more simple,
    css-layout-wise...
    or, if the demo files were commented with what each bit is
    for and how to modify it.
    quote:
    Originally posted by:
    Dragos GEORGITA
    Hi Mario,
    I took a look at your sample and I've noticed you change the
    ID of the container that holds the thumbnails (it was called:
    "thumbnails". now it's "thumbContainer").
    You need to open gallery.js and change the observer to point
    to the new container:
    Change
    Spry.Data.Region.addObserver("thumbnails", function(nType,
    notifier, data) {
    To
    Spry.Data.Region.addObserver("
    thumbContainer", function(nType, notifier, data) {
    Regards,
    Dragos

  • Problems with using Spry photo gallery and Opera browser

    Using Dreamweaver CS3. I'm working on a website for a friend.
    It looks great in:
    -IE 6 and 7
    -Firefox
    -Safari
    But in Opera, the photo gallery I put in (uses spry to change
    images as the user rolls over the thumbnail) pops up a login box in
    Opera. It doesn't do this in any other browser and it works
    perfectly in all other browsers.
    WDYT? TIA, Steve

    Using Dreamweaver CS3. I'm working on a website for a friend.
    It looks great in:
    -IE 6 and 7
    -Firefox
    -Safari
    But in Opera, the photo gallery I put in (uses spry to change
    images as the user rolls over the thumbnail) pops up a login box in
    Opera. It doesn't do this in any other browser and it works
    perfectly in all other browsers.
    WDYT? TIA, Steve

  • Spry Photo Gallery Widget with filmstrip

    The main image in the photo gallery doesn't appear but the thumbnails do.
    http://www.woodsphotography.org/AbstractSlideshow1.html
    I'm using Dreamweaver CS5 and everything works fine when previewed in firefox or safari but once uploaded to the server this happens.
    Any help would be greatly appreciated.
    Keith

    Hi,
    please have a look here to this thread, where we had a similar question (hope it's similar to your gallery):
    http://forums.adobe.com/message/3398072#3398072: "Spry Widget Slideshow works in Firefox/Safari but not in Explorer"
    Hans-G.'s demand:
    BUT I have to ask me/you why the same command, listed in the "SpryImageSlideShow.css" is not running.
    gramps answer:
    The red coloured lines are not included in the original; but will make it work for IE6/7
    <style>
    #ImageSlideShow .ISSSlide {
       position: absolute;
        top: 0;
         left: 0;
        text-align: center;
       width: 100%;
        height: 100%;
    </style>
    Hans-Günter

  • Change cursor to pointer in spry photo gallery

    Can anyone help me, I have created a website using Adobe's Spry Photo album and I need the cursor to change to a pointer to give the user an indication that there will be an action occuring when the thumbnail in the gallery is clicked.
    Dave Powers suggested that I use a "hover pseudo-class" and gave me this code and suggested I put it into my Style sheet.
    .thumbs:hover {
       cursor: pointer;
    I tried this but it did not work.
    The website is: www.artizancreations.co.uk
    Have I put this code in the wrong place, if so where should it go?
    Regards
    P

    poloswartzenegger wrote:
    Hi Nadia, thanks for the input, I tried your suggestion and the cursor remained the same. I am trying the suggestions before uploading to my server, that is why you will not find David's code anywhere.
    Ah, that confirms why I couldn't see it  :-)
    copied and pasted directly into the css stylesheet initially, but that did not work. Do I have to create a new rule in the style sheet and if so would it be a class? and once that rule has been made how do I add the code?
    Well, into the stylesheet would be better because if you have the a similar gallery on another page, the other pages will read it too, if they are linked to the stylesheet.
    Yes, it is a class.
    Perhaps .thumbs should read .thumbnails as I do not think thumbs is anywhere in my code?
    If there is a .thumbnails class in your current stylesheet and it refers to the styling of the thumbnails, then yes, replace thumbs with thumbnails and see if that works.
    On a very quick look, I couldn't see a class for the thumbnails, all I could see what a class for the .thumbsContainer.
    I'm only going by the code that David supplied you to make sure you place it in the correct place for testing purposes.  I have not used this gallery before and am not sure of all the styles associated with it.

  • Making a beautiful spry photo gallery

    I'm trying to make a photo album like the one on adobe's spry
    sample photo album page here,
    http://labs.adobe.com/technologies/spry/demos/gallery/index.html
    But I haven't been able to find any tutorials to do such a
    thing, so I've resorted to cutting and pasting code, which is a
    really bad idea for me since I'm new to web design and for me
    understanding java script is harder than understanding the female
    psyche.
    At any rate, this is what I've been able to do so far for my
    wife's retail site:
    http://paxbaby.com/photoalbum.htm
    If anybody feels ready and able to take on the challenge, I
    have 3 real problems I haven't been able to figure out: first, how
    to make the big pictures fade in and out like on Adobe's sample
    page; second, how to make the thumbnails grow and shrink in front,
    not behind, the other thumbnails, and third, how to make the
    thumbnails grow and shrink from their center point, not from their
    upper left corners.
    I'd love it if anyone is willing to help me out with this --
    and if you have any other pointers on my site there, I'm all
    ears!

    I've set up the photo gallery demo -china,paris,egypt- and
    made a swap of a couple of my photos from in Dreamweaver's property
    box src for thumbs, and link for the large pic. It works in Safari
    and Opera but not in firefox and I don't know about IE as I'm on a
    MAC and not that for into it yet.Is there something to look for in
    the code? It shows no browser issues when I test for compatability?
    I'd really like to use the xml version but I have tried and had no
    luck except in Safari.

  • SPRY photo gallery and photo captions

    Has anyone experimented with adding captions to the photos?
    Was looking at different gallery examples, and saw that lightbox
    does captions, but the transitions, and AJAX approach with spry are
    much nicer...
    Thanks!

    Thank you for your tip. I have tried it Katiebird but it
    didn't work.
    Here is my doc:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- Copyright (c) 2006. Adobe Systems Incorporated. All
    rights reserved. -->
    <html xmlns="
    http://www.w3.org/1999/xhtml"
    xmlns:spry="
    http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-1" />
    <title>Gallery</title>
    <link href="includes/screen.css" rel="stylesheet"
    type="text/css" />
    <script type="text/javascript"
    src="includes/SpryEffects.js"></script>
    <script type="text/javascript"
    src="includes/SpryDOMUtils.js"></script>
    <script type="text/javascript"
    src="includes/SpryImageLoader.js"></script>
    <script type="text/javascript"
    src="includes/SpryNotifier.js"></script>
    <script type="text/javascript"
    src="includes/SpryThumbViewer.js"></script>
    <script type="text/javascript"
    src="includes/SpryImageViewer.js"></script>
    <script type="text/javascript"
    src="includes/SprySlideShowControl.js"></script>
    <script type="text/javascript"
    src="includes/gallery_init.js"></script>
    <script type="text/javascript"
    src="includes/xpath.js"></script>
    <script type="text/javascript"
    src="includes/SpryData.js"></script>
    <script type="text/javascript"
    src="gallery_xds.js"></script>
    </head>
    <body>
    <div id="wrap">
    <p id="galleryLinks"><a href="fall08.xml">Fall
    2008</a> | <a href="egypt.xml">Egypt</a> | <a
    href="paris.xml">Paris</a></p>
    <div id="gallery" class="gallery">
    <h1 class="galleryName"
    spry:region="dsPhotos">{sitename}</h1>
    <div id="previews">
    <div id="controls">
    <ul id="transport">
    <li><a href="#" class="previousBtn"
    title="Previous">Previous</a></li>
    <li><a href="#" class="playBtn" title="Play/Pause"
    id="playLabel"><span
    class="playLabel">Play</span><span
    class="pauseLabel">Pause</span></a></li>
    <li><a href="#" class="nextBtn"
    title="Next">Next</a></li>
    </ul>
    </div>
    <div id="thumbnails" spry:region="dsPhotos">
    <div class="thumbnail" spry:repeat="dsPhotos"><a
    href="{path}"><img alt="" src="{thumbpath}"
    /></a></div>
    <p class="ClearAll"></p>
    </div>
    </div>
    <div id="picture">
    <div id="mainImageOutline"><img id="mainImage"
    alt="main image" src=""/></div>
    </div>
    <p class="clear">dave</p>
    </div>
    <div style="color:#FFFFFF:" align="center" id="caption"
    spry:detailregion="dsSlides">{@caption}</div>
    </div>
    </body>
    </html>
    AND HERE IS the xml:
    <gallery
    base = ""
    background = "#FFFFFF"
    banner = "#F0F0F0"
    text = "#000000"
    link = "#0000FF"
    alink = "#FF0000"
    vlink = "#800080"
    date = "8/01/2008">
    <sitename>Fall 2008</sitename>
    <photographer></photographer>
    <contactinfo></contactinfo>
    <email></email>
    <security><![CDATA[]]> </security>
    <banner font = "Arial" fontsize = "3" color =
    "#F0F0F0"> </banner>
    <thumbnail base ="gallery/fall08/thumbnails/" font =
    "Arial" fontsize = "4" color = "#F0F0F0" border = "0" rows = "3"
    col = "5"> </thumbnail>
    <large base ="gallery/fall08/images/" font = "Arial"
    fontsize = "3" color = "#F0F0F0" border = "0"> </large>
    <photos id = "images">
    <photo
    path = "1_28_04snow154.jpg"
    width = "500"
    height = "375"
    thumbpath = "1_28_04snow154.jpg"
    thumbwidth = "75"
    thumbheight = "56"
    caption="A Leaf">
    </photo>
    <photo
    path = "arts.jpg"
    width = "500"
    height = "333"
    thumbpath = "arts.jpg"
    thumbwidth = "75"
    thumbheight = "50"
    caption="A Leaf">
    </photo>
    </photos>
    </gallery>
    If you could Help I would appreciate it.

Maybe you are looking for

  • Physical implementation.

    Hi friends, I have Oracle 7.3 and 9i databases on HP UX 11.now I want to deploy 9iAS J2EE and web Cache on same server from remote location connected with T1, which can talk to both of this databases.Should i need specefic user,with specific privs ot

  • Problems with dreamweaver

    importing existing business catalyst sites into dreamweaver problem

  • Bleeds and Trim Marks

    So I am desinging a business card for a company I work for. The company we are sending them off too obviously needs to have the bleed and trims marks. The only thing I can't figure out is how do I make the bleed marks visible to them? When I print th

  • Formula help when offline

    Hi, the numbers "formulas and functions" help seems to have moved to the internet, which I am pretty upset about. Now, when I don't have an internet connection (I travel a lot), where can I find the help about the formulas and funcitions? The built-i

  • [NEWBIE] NWDI Missing Domain Issue in Login

    Hi Experts, I would like to ask why when I login to NWDS I had the following error below.    Build Server http://p77ix100:50000 is unreachable.    DTR Server http://p77ix100:50000/dtr  is unreachable. The error is that the domain it should have is mi