SPRY image gallery bigger thumbnails

Hi,
I am new to Ajax (trying to learn) and i think SPRY it's
great.
I am working in the image gallery and i want to have bigger
thumbnail images on mouse over- bigger than 24px - and i can't....
I changed the css #thumbnails img to 50px for example but
when i am trying to mouse over i get a mess.
Also when i am trying to do this from the gallery.js in the
"var gThumbHeight;" and "var gThumbWidth;" i get a mess again.
How can i do this for example thumbnails "width:100px;" and
"height:100px;"
Thank you in advance

OK, I solved the problem how to make thumbnails bigger while
i am hovering on them.
But now there is another problem......
When a thumbnail becomes bigger in the Firefox everything
works fine, but when it becomes bigger in the IE remains under the
next thumbnail.
I don't know how to described better.
Thank you in advance

Similar Messages

  • Spry image gallery with filmstrip - how to display all thumbnails?

    Hello,
    I'm using the Spry image gallery with filmstrip and want to be able to show all thumbnails. So instead of scrolling across to see all the thumbnails I would like to display them in a couple of rows. I thought it would be a case of changing the css from overflow: hidden to overflow: visible and increasing the height but this didn't make a difference.
    An example of my gallery is here http://www.demo.femmewebsites.com/gallery.html (This site doesn't have many thumbnails but I have others with 20+ images that need to be displayed)
    Your help would be much appreciated.
    Thanks

    Hello Krista,
    did you have a look here: http://labs.adobe.com/technologies/spry/demos/pe_gallery.html, where you will find DW "Photo Gallery Demos". In every demo, are arranged a large number of images in several rows and rows. Therefrom you can use their source codes.
    Hans-Günter

  • Spry image gallery

    Hi there, just a question, I created a spry image gallery successfully with thumbnails on the left and the bigger image and details on the right, my problem is its created it with all the thumbs going down vertically after looking everywhere i havent found the solution, im hopefully wanting the thumbnails in a grid style so there are a few on each line, can anyone help?

    I'm not sure which part of the code you were asking for, but this is the code from the actual spry table which was created.
        <div id="Text">
          <div class="MasterDetail">
            <div spry:region="ds1" class="MasterContainer">
              <div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{thumbnail}</div>
            </div>
            <div spry:detailregion="ds1" class="DetailContainer">
              <div class="DetailColumn">{name}</div>
              <div class="DetailColumn">{description}</div>
              <div class="DetailColumn">{picture}</div>
            </div>
            <br style="clear:both" />
          </div>
          <p> </p>
        </div>

  • Image Gallery Magic Thumbnails Not Showing

    I have an existing page which I've added a new gallery to.
    The gallery
    looks fine in Dreamweaver but as soon as it's viewed in IE
    the thumbnails do
    not show up. If I select the encoding of the page to "none"
    all works fine
    with the gallery but my DIV tags don't works properly, i.e
    they don't
    center. I have uploaded an example of my page:
    www.bluchip.gg/bc458a.htm
    Any ideas?

    Hi Warren,
    Your style sheet has errors in it. Replace your style sheet
    with a fresh
    default one.
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"
    "Syztemlord" <[email protected]> wrote in
    message
    news:fr67fr$7oh$[email protected]..
    >I have an existing page which I've added a new gallery
    to. The gallery
    > looks fine in Dreamweaver but as soon as it's viewed in
    IE the thumbnails
    > do
    > not show up. If I select the encoding of the page to
    "none" all works
    > fine
    > with the gallery but my DIV tags don't works properly,
    i.e they don't
    > center. I have uploaded an example of my page:
    >
    >
    http://www.bluchip.gg/bc458a.htm
    >
    > Any ideas?
    >

  • Image gallery to autoplay and highlight the thumbnails

    Hi all,
    I still haven't been able to find anything suitable for an
    image gallery with thumbnails that:
    - autoplays
    - highlights the thumbnails and displays the main image at
    the same time
    - and when the mouse is over the thumbnail, the thumbnail
    highlights or has a border around to show that it's been selected.
    Here is a sample of what I'm looking for:
    http://components.earthscienceagency...nts/slideshow/
    Of course the captions need to be loaded as well as a
    previous and next button to scroll through the images.
    Any help with this would be greatly appreciated.
    Thanks

    Hi all,
    I was able to resolve some of my issues, but still have a
    couple more. The images from my xml appear out of order (so the
    last one inserted in the xml appears first) and also I'd like the
    thumbnails to be highlighted as the main image transitions in and
    out. I have the main image autoplaying and the thumbnails are
    pretty much static.
    I've provided the AS below. For the thumbnails, would it be
    possible to create a similar to the slideshow function and have the
    thumbnails play at the same time too?
    Any help would be greatly appreciated!

  • Flash simple image gallery problem

    Hello I have what I think is an easy problem to solve but I
    can´t find a solution.
    I´m creating an image gallery with thumbnails on the
    right inside a symbol so that
    they can all fade in at the same time, and the bigger images
    on the left that also fade in.
    I can only fit 8 thumbnail images at a time, and want to have
    more than that.
    So I´ll add an arrow below the thumbs so that when you
    click on it, you can see the other thumbs.
    I have the first 8 thumbs on the first frame of a symbol and
    the rest on the second frame.
    My problem is that the symbol that contains the thumbs is a
    graphic symbol, so that the thumbs in it, that are button symbols
    can be clicked on. I tried using button and movie clip symbols for
    the thumbnails container but then the buttons (thumbs) can´t
    be clicked any more.
    That was not a problem till I had to add more than 8 thumbs,
    cause i need to give the container an instance name, and graphic
    symbols can´t have one.
    Here is the link to download the .fla
    www.ginkgo.com.uy/old/downloads/handheld_pink.fla
    In case I didn´t make my self clear, what I need is to
    know if there´s a way to have a movie clip or button symbol
    that can have buttons in it that can be clicked on.
    I hope I didn´t give you a headache.
    Thanks a lot, Marcelo.

    thanks.
    that´s what i thought but, if i convert the container to
    a button symbol the thumbs can´t be clicked anymore.
    And if I convert the container to a movie clip like you
    suggested, then if I click on any part of the container it
    just goes to the second frame of the movie clip container, if
    i click again it goes back to the first frame and so on.
    But there is no action script for the container at all,
    please try it out with the fla i uploaded.
    i can´t figure it out.
    thanks

  • Help! I need a special image gallery!!

    Hello!
    anyone know if you can make an image gallery with thumbnails and where each one is linked to a photo slide? Also require that the thumbnails act as a color button, not appear like a thumbnail photo. I need help! Thanks in advance!
    PD: sorry for my english skills!!!

    Hello,
    You can use Blank Composition Widget to achieve this.
    Seems like you are trying to create something similar to : http://muse.adobe.com/widgets/composition/slideshow-ouatt.html
    You can insert your images in the Target containers and can use Fill colors for different states of trigger containers.
    Please refer to the video which might help : http://tv.adobe.com/watch/muse-feature-tour/muse-trigger-target/
    Regards,
    Sachin

  • Scrolling image gallery problems

    I am creating a scrolling image gallery using thumbnails.  I have 36 thumbnails that are 100 x 100 px.  I cannot figure out the x y coordinates to line up the images correctly.  They are overlapping.  I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap.  Does anyone have a clue how to fix this?  I am working on this site for a very pushy client who wants it done NOW...Thanks,

    If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.

  • Adding spry fade effect to thumbnail gallery??

    Hi,
    I have a gallery page with a set of thumbnail images each linking to a main image.
    I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
    I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
    <a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
    ...so i'm not sure if i can add the onclick events for the fade which is:
    onclick="firstFade.start();"
    Any ideas how i can get this to work?
    Thanks for any help
    B

    hi, thanks for the reply.
    This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
    Here's the html:
    <div id="left">
                    <img src="images/jpg25.jpg"  title="kawasakigreen">
    </div>
    <div id="right-gallery">
                        <div class="gallery">  
    <a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
    <img src="/images/gallery/thumb_1.jpg" alt=""/>
    </a>
    <a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
    <img src="/images/gallery/thumb_2.jpg" alt=""/>
    </a>
    <a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
    <img src="/images/gallery/thumb_3.jpg" alt=""/>
    </a>
    <a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
    <img src="/images/gallery/thumb_4.jpg" alt=""/>
    </a>
                     </div>
    </div>
    So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
    Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
    Thanks
    B

  • 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

  • Seeking Spry Gallery mouseovered thumbnail identifier/ID

    Hi!
    I would like to ask my earlier question about the Dynamic
    Image Preview extension in a different way. I think my point was
    not clear.
    Operating in a Spry gallery of thumbnails with my images in
    ‘images/’ directory, what is the identifier that will
    give the name of the thumbnail image being currently mouseovered
    and make it possible to go to the images directory and extract the
    main image?
    Do I write it as
    ‘images/{Ds_CurrentRowID}{photoname)’ or ‘images/
    + {Ds_RowID}(photoname}’ or what?
    Thanks!
    Mike

    Hi Don,
    Many thanks for your patience!
    Latest news:
    Good heavens! I put that version up again (
    http://www.worldseniorcharityrugby.org/index2.php)
    and the third column appears to work for the top image! The images
    are too big - I will upload smaller ones.
    I see another problem: any ideas why it may not work for the
    second or third image? Could it be the numbering in the 'link' part
    is replicated by Spry?
    I put a version up again - on the page there are 5 images per
    record. I am just focusing on the third & fourth of those
    images involving {photo3} and {photo4} until I get the answer.
    Looking at your site again I think the below is getting a bit
    nearer to the answer -
    I have put backslashes since it is inside javascript - is
    that right?
    To put the setCurrentRow before the
    'javascript:createPreviewImage ..' would seem to be the best way
    but it won't work!
    I wonder whether this extension can actually be intregrated
    into Spry! I hope it can.
    Mike
    <div align="center"><a href="Link502072C0"
    id="Link502072C0" style="cursor:help"
    onmouseover="javascript:createPreviewImage('TSPreviewImagePanelID502072',
    DsIndividuals2.setCurrentRow(\'{ds_RowID}\'); '{photo3mes}',
    '../images/{photo3}', 'Link502072C0',600,450, true)"; <img
    src="<?php echo $objDynamicThumb4->Execute(); ?>" alt=""
    name="photo3" height="66" border="0" align="middle" id="photo3"
    /></a></div>
    </div>
    </div></td>
    <td width="70"><div>
    <div>
    <div align="center"><a href="Link502072C0"
    id="Link502072C0" style="cursor:help"
    onmouseover="DsIndividuals2.setCurrentRow('{ds_RowID}');
    javascript:createPreviewImage('TSPreviewImagePanelID502072',
    '{photo4mes}', '../images/{photo4}', 'Link502072C0',600,450,
    true)"; <img src="<?php echo $objDynamicThumb4->Execute();
    ?>" alt="" name="photo4" height="66" border="0" align="middle"
    id="photo4" /></a></div>
    </div>

  • 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.

  • 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.

  • 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

  • Cycle images in a thumbnail gallery

    Hi, I'm very new to HTML, so please bear with me. I'm
    currently using a "Thumbnail Gallery" style page for my online
    portfolio (when the cursor hovers over a thumbnail the image pops
    up to the left of it) Here's a link:
    Portfolio
    What I'm wondering is, would it be possible to cycle through
    several images, when the cursor hovers over a Thumbnail (instead of
    just one image for each thumbnail)? I'm thinking of showing several
    views of a single model in my 3D section.

    You could try and combine the code with a slide show like
    this one...
    http://www.lisajaynedann.co.uk/
    If you are not confident about trying to combine the code (I
    wouldn't be!) then you could have the page as you have it now, but
    require the users to click each thumbnail, instead of hovering to
    select the next slide show. By clicking each thumbnail would link
    to a new page, carrying the separate slide show.
    You could also try and find a script that follows a link on
    hover rather than having to click.

Maybe you are looking for