Photo Gallery CSS

Hi all, when adding a description to the gallery items within a BC gallery I cannot see the font as the CSS globally for the site is set to white.
Does anyone have a work around to change the photo descriptions font colour to black?
Can we modify the lightbox script to change the description text font colour?
http://www.upowerzegovanuatu.com/about.html
See Meet our Staff...

Hey Liam!
Thanks for your reply.
The site is here: villabiru.com
THe caption is on the second photo in the photo gallery.
Sorry about this. I am just not the code legend that you are.
I have since changed the CSS to
#imageData .caption {
color: #333;
But it is still not working.
Where are these classes generated anyway? They are not in Modulestylesheets as a search does not bring them up.
Regards,
Mary

Similar Messages

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

  • Photo Gallery combined with three column CSS

    Hi, I am trying to implement your photo gallery into our
    school site and I am having trouble with the layout. I am using a
    three-column layout created with CSS and JS, and then placing the
    photo gallery inside of this. What happens is when you pull up the
    page the three column layout does not position everything correctly
    until you resize the browser window (ever so slightly). Help, have
    been staring at CSS and JS code now for about a month and cannot
    get it to behave, any help would be greatly appreciated. Thanks.
    HSPVA Photo
    Gallery

    "kjuliff" <[email protected]> wrote in message
    news:eqij22$are$[email protected]..
    >I can reproduce your problem, gnd4evr&evr. I have XP
    an IE7 and FF2.
    >It's fine
    > in FF2 but not in IE7.
    >
    > I have a similar problem, and I think it's related. This
    problem
    > really needs
    > addressing!
    >
    > Go to
    http://www.coolabah.com/spry/demos/gallery/
    and look at the
    > bottom of
    > the page (in either IE or FF). You will see a google
    adsense div.
    > Although it
    > is specified in it's div tab as being 15 px in height,
    it takes up
    > much more
    > than that.
    >
    > I HAD wanted to have these google links at the top of my
    gallery, but
    > cannot
    > as I cannot force the div to be only 15px in height.
    >
    > I posted this problem a few weeks ago but no one
    answered.
    Your Google ads are in an iframe. This rule will get you
    started
    iframe {
    height: 2em !important;
    position: absolute;
    top: 650px;
    You can leave the position static if you like, and it will
    move up and
    down with your images - I found that a bit distracting,
    though. If you
    leave it static, use a top-margin to establish space between
    your image
    and the ads.
    The !important notation is required for the height,
    indicating either a
    conflict somewhere in your markup or CSS, or poor Google code
    (not
    uncommon).
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"

  • Can a photo gallery like this be created in html/CSS?

    http://jeffsullivan.smugmug.com/Landscapes/National-Parks/Zion-National-Park-Utah/1946310_ 6PtgP#136213013_XVhBQ
    I like the way these galleries expand to browser width - both the thumbs and big image enlarge. I want to learn to make a photo gallery (+ slideshow) perform like this or hire someone with the specific skill set needed to make it for me. I've looked around quite a bit online at photo gallery apps, both free and for sale, including some offered by forum regulars (thanks!), but haven't found one I really liked.
    My intent is not to copy this gallery (that would be stealing),  just to adopt the expanding images- to browser width feature.
    I know Flash could do it but I don't see .swf anywhere in the source... would it be done with Javascript or a combination of apps?

    What I didn't mention before is that the photo gallery I want will be only one part of a community-based commercial site under development that needs to integrate with other parts.
    That's why I'm asking what sort of developer/skills I'd need to make this happen.
    I see.  OK, for starters you'll need a firm grasp of XHTML, CSS, JavaScripting, and server-side programming such as PHP and MySql databases.
    You also might like to look at an open source Groupware solution such as TikiWiki that has a lot of stuff already built into it.
    http://info.tikiwiki.org/tiki-index.php
    Good luck,
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • How do I do a very basic CSS customization on the standard Photo Gallery Module lightbox?

    Hi,
    All I want to do is make the text description that appears when you click on a picture within the standard photo gallery a different colour.
    If I view source on a gallery page I see the CSS file used is Catalyststyles/lightbox.
    Any help would be appreciated.

    Thanks Liam,
    I found that I can target that Caption in my style sheet by adding a the style:
    #imageData #caption
    my new style here

  • HTML/CSS photo gallery updatable in Contribute?

    I'm putting together a website for a client who wants a photo
    gallery which they can update on a fairly regular basis.
    They'll be using Contribute to maintain other parts of the
    site, and I'd like to be able to give them the same access to the
    gallery, but the majority of more interesting ones (PVII, for
    example) seem to be a mite complicated for a Contribute update.
    Can anyone recommend an interesting, sophisticated-looking
    gallery which can fit these criteria?
    Many thanks

    TrentSC wrote:
    > I'm putting together a website for a client who wants a
    photo gallery which
    > they can update on a fairly regular basis.
    >
    > They'll be using Contribute to maintain other parts of
    the site, and I'd like
    > to be able to give them the same access to the gallery,
    but the majority of
    > more interesting ones (PVII, for example) seem to be a
    mite complicated for a
    > Contribute update.
    >
    > Can anyone recommend an interesting,
    sophisticated-looking gallery which can
    > fit these criteria?
    Hi,
    You might take a look at Nadia's templates - she has a couple
    of
    Photographer specific offerings.......
    http://www.csstemplates.com.au/photography_csstemplates/index.shtm
    chin chin
    Sinclair

  • Photo Gallery bug in IE7

    http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html
    On mouseover, selected thumbnail expands behind other
    thumbnails instead of hovering over them. Works fine in FF.
    Is there a way to fix/override this?

    @Kin
    The gallery demo files do not put an anchor link around the
    thumbnails. The article you list is describing how to alter the
    files for (newer?) examples that require about 8 different include
    files -- which, given the already HUGE download hit required to run
    a photo gallery, seems excessive.
    Can adobe not write up a solution that works for the sample
    files for the gallery that only requires 3 includes + 1 css file
    (which can be added to your own style sheet to avoid yet another
    file download)?
    Or, is there someway to grow the thumbnails from the bottom
    right corner, thus avoiding any overlap by subsequent thumbs? I
    tried setting the grow from center to false in SpryEffects but it
    appeared to have no effect on the function in the gallery.

  • Data not dynamically updating in photo gallery

    The page in question is
    this
    photo gallery.
    The primary issue is when one thumbs through the images, the
    "photoID" does not update. It remains at the first "photoID" that
    is encountered, and in this case, it is 729. The "title",
    "description" and so forth remain locked to the first entry as
    well, yet the photograph updates "@path".
    I've been working at this for almost two days and have tried
    almost every possible combination. I've copied over the older
    framework files from my other site (which has this working
    successfully), modified it to work in this instance, and it fails
    here. The XML output is correct.
    function photogallery(){ //Photo gallery
    ?>
    <div class='right'>
    [Snip out collapse panel...]
    <div
    spry:detailregion="dsGallery">{photoID}</div>
    <div id="mainImageOutline"><img id="mainImage"
    alt="main image" src="{@path}" /></div>
    </div>
    <div class='left'>
    <div id='previews'>
    <div id='controls'>
    <div id='transport'>
    <a href='#' class='previousBtn'
    title='Previous'><img src='/res/images/buttons/rewind.png'
    alt='[skip-back]' border='0' /></a>
    <a href='#' class='playBtn' title='Play/Pause'
    id='playLabel'><span class='playLabel'><img
    src='/res/images/buttons/play.png' alt='[play]' border='0'
    /></span><span class='pauseLabel'><img
    src='/res/images/buttons/pause.png' alt='[pause]' border='0'
    /></span></a>
    <a href='#' class='nextBtn' title='Next'><img
    src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
    /></a>
    </div>
    </div>
    <div id='thumbnails' spry:region='dsGallery'>
    <div class='thumbnail' spry:repeat='dsGallery'><a
    href='{@path}'
    onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
    src='{@path}' width="80" height="80" /></a></div>
    </div>
    </div>
    </div>
    <div style='clear: both;'> </div>
    <?
    }

    Even doing that was no help unfortunately. Here is an
    extended snippet,
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml"
    xmlns:spry="
    http://ns.adobe.com/spry">
    <head>
    <title>Urban Up, a web-site by Sherman
    Cahal</title>
    <meta http-equiv="Content-Type" content="text/xml;
    charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css"
    media="screen" />
    <script type="text/javascript"
    src="includes/SpryAssets/SpryEffects.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/SpryDOMUtils.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/SpryImageLoader.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/SpryNotifier.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/photogallery/SpryThumbViewer.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/photogallery/SpryImageViewer.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/photogallery/SprySlideShowControl.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/photogallery/gallery_init.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/xpath.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/SpryData.js"></script>
    <script type="text/javascript"
    src="includes/SpryAssets/photogallery/gallery_xds.js"></script>
    <script type="text/javascript">
    var dsGallery = new Spry.Data.XMLDataSet("<? echo
    $tmpfname; ?>", "/gallery/photos/photo");
    </script>
    </head>
    function photogallery(){ //Photo gallery
    ?><div class='right'>
    <div spry:detailregion="dsGallery">{photoID}
    <div id="mainImageOutline"><img id="mainImage"
    alt="main image" src="{@path}" /></div>
    </div>
    </div>
    <div class='left'>
    <div id='previews'>
    <div id='controls'>
    <div id='transport'>
    <a href='#' class='previousBtn'
    title='Previous'><img src='/res/images/buttons/rewind.png'
    alt='[skip-back]' border='0' /></a>
    <a href='#' class='playBtn' title='Play/Pause'
    id='playLabel'><span class='playLabel'><img
    src='/res/images/buttons/play.png' alt='[play]' border='0'
    /></span><span class='pauseLabel'><img
    src='/res/images/buttons/pause.png' alt='[pause]' border='0'
    /></span></a>
    <a href='#' class='nextBtn' title='Next'><img
    src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
    /></a>
    </div>
    </div>
    <div id='thumbnails' spry:region='dsGallery'>
    <div class='thumbnail' spry:repeat='dsGallery'><a
    href='{@path}'
    onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
    src='{@path}' width="80" height="80" /></a></div>
    </div>
    </div>
    </div>
    <div style='clear: both;'> </div>
    <?
    And the XML file that is created:
    <?xml version="1.0" encoding="utf-8"?>
    <gallery base = "">
    <photos id = "images">
    <photo path="
    http://www.urbanup.net/content/20070629/photos/1_13_251.jpg">
    <photoID>729</photoID>
    <title>Downtown</title>
    <description><![CDATA[]]></description>
    </photo>
    <photo path="
    http://www.urbanup.net/content/20070629/photos/1_19_3.jpg">
    <photoID>834</photoID>
    <title></title>
    <description><![CDATA[A shared common area divides
    the new homes along South Mill.]]></description>
    </photo></photos></gallery>

  • Need "Rotate" Function in Photo Gallery

    All of my screen grabs end up 90 degrees rotated in PhotoGallery. There is no rotate function in Photo Gallery so to deal with these images I first open them in Adobe Editor on iPad and rotate them then save them to PhotoGallery.
    Is there a better way to do this?

    To the example that you have linked to above, make the following additions
      <div id="arch-container" style="position:relative;">
        <div id="arch-img" style="position:absolute; top: 170px;"><img src="images/arch-img.png" alt="arch_img" width="959" height="195" /></div>
      </div>
    I have used inline styles to make it easy on myself, but in reality you would put the style rules in the corresponding element selector in the CSS. Also, you would readjust the values to suit.
    Also, it is worth mentioning that placing a width and height on your image as you have done, should really be done using CSS.
    Added:
    As a side note, I have gotten into the habit of using classes for all of my style rules. I came to the conclusion that this is the way to go when trying to analyse a problem within my web page. ID's are unique per document and as such are used when manipulating the DOM using JavaScript. Now when I see an ID in one of my documents, I know that it is not a styling matter as in CSS, but a problem within my script.
    Take the above note as a thought, because there is a ongoing debate about this.
    Message was edited by: Altruistic Gramps

  • HELP with photo gallery in a table

    I have a table that is acting as my photo gallery.
    Each thumbnail pressed trigers the image to expand into the first column of the table. However,  depending on whether I select a vertical or horizontal image, the rest of the thumbnails get shifted over to accommodate room for the large image.
    My question is: is there a way to somehow FIX the dimensions of that first column so that the thumbails will stay in place??
    Thanks.

    Use CSS floats and margins to set up your gallery (view source to see the code).
    http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
    Nancy O.

  • Photo Gallery start up problem

    I have a glitch and it's probably me … but here's what
    I know.
    About Don Booth's Photo Gallery:
    It's great. Everything is good - integrated with my CSS -
    looks nice.
    When the page loads all is well except the first image in the
    Gallery does not display in <div id="mainImageOutline"... (and
    the first thumbnail is not highlighted). While I'm building and
    testing this is OK. Just click a thumbnail and everything works
    well.
    In the demo, the Gallery is operational by default and starts
    up with the first thumbnail and Spry:detail produces the
    corresponding image (automatically). That's what I want.
    About my code:
    Except for a couple of "page layout" divs that I have,
    consistent with my own site-wide style sheet conventions, such as
    <div id="wrapper"> and <div id="maincontent"> I have:
    1. Copied Don Booth's xhtml code directly from the
    Spry_1_1_022408 download sample.
    2. Copied Don Booth's css code directly from the same
    download sample.
    3. Copied Don Booth's gallery.js directly (without change as
    far as I know).
    The only significant change (apart from CSS and xhtml
    structure) in my work is - I added an additional Spry:detail div to
    present additional datapoints from xml. This is not relevant to my
    question because the issue that concerns me is consistent if I
    remove this second detail div. The start-up problem remains.
    The URL for the gallery page in question is:
    http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
    I imagine the problem is in gallery.js. You should know that
    javascript is a bit like dungeons and dragons to me.
    I have an error report:
    Error: dsPhotos is not defined
    Source File:
    http://www.yhqg.org/Celebration/quiltshow2008/galleryix/includes/gallery.js
    Line: 55
    So, when I see:
    var gAutoStartSlideShow;
    if (gAutoStartSlideShow == undefined)
    gAutoStartSlideShow = true;
    I imagine I'm looking at something useful but I don't know
    what to do with it, or if it is the right code to focus on. I
    respect the relationship with level 4 support engineers, but after
    trying to solve my own issue for a few weeks I decided it was time
    to submit my question. How do I get Photo Gallery to start up like
    the demo?
    Additional information:
    There is also a series of error reports that show when the
    Gallery is playing (for example):
    Warning: Expected end of value for property but found
    '-0.0775'. Error in parsing value for property 'opacity'.
    Declaration dropped.
    Source File:
    http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
    Line: 0
    I don't think it is related, but that's what I know.
    I tried to copy my xhtml (below) but it caused this message
    to exceed allowed size. But I don't see that xhtml is the problem.
    You can see the source at the URL (above).

    Hi Latauro,
    Sounds like you need to turn your Slideshow into a Track, and then set the Track to display as 16:9 Letterbox; but first, you'll also need to encode your slides as wide Mpeg 2 clips (encode set to 16:9), too; to whatever duration you have them set in the Slideshow, currently (if they're not already wide encoded clips).
    It would be good to stick some same duration audible or silent same format and bit rate audio underneath each of the new movie slides, to present players a nicely packed VOB.
    Take care,
    Trai Forrester
    TFDVD Research Labs
    http://www.DVDVerification.com
    PS. If this helps you, would you please remember to declare the thread as "Solved". Although probably hopeless, someone should make a run to try and catch up with good Drew!! (see what happens Hal, when you take some time off?!

  • Photo Gallery Demo Problem

    I'm trying to understand the Photo Gallery demo so I can
    replicate the function for use on various sites. I've copied the
    html, xml, javascript and some of the photo file elements to my
    hard drive. I initially modified the file structures to something
    more of my liking, but had some problems with the links. I've since
    mimicked the structures so I can reduce the initial errors, but I
    am stumped at the var dsGallery and var dsPhotos statements that
    dynamically link to the China, Paris and Egypt photo databases. In
    the original dynamic definition, DreamWeaver only parses the
    dsGalleries XML definition, not defining the dsGallery and dsPhoto
    nodes. I wasn't too concerned about that given the variable nature,
    but nothing except the pull-down menu and controls displayed in the
    browser. DreamWeaver shows correct parsing of the dsGalleries XML,
    dsGallery and dsPhoto nodes only when I eliminate the dynamic
    linking and set it to one of the static links (Egypt). This fails
    in the browser to link to the data, giving a display that shows the
    correct number of empty thumbnail frames but without the displayed
    photos, no Spry effects, and no large photo display. I'm sure I
    have multiple reference errors, but I don't see them. Any ideas?
    Initial Photo Demo page:
    <!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 rel="stylesheet" type="text/css"
    href="../css/screen.css">
    <script type="text/javascript"
    src="../SpryAssets/xpath.js"></script>
    <script type="text/javascript"
    src="../SpryAssets/SpryData.js"></script>
    <script type="text/javascript"
    src="../SpryAssets/SpryEffects.js"></script>
    <script type="text/javascript">
    var dsGalleries = new
    Spry.Data.XMLDataSet("galleries/galleries.xml",
    "galleries/gallery");
    var dsGallery = new
    Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
    "gallery");
    var dsPhotos = new
    Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
    "gallery/photos/photo");
    </script>
    <script src="../SpryAssets/gallery.js"
    type="text/javascript"></script>
    </head>
    <body id="gallery">
    <noscript><h1>This page requires JavaScript.
    Please enable JavaScript in your browser and reload this
    page.</h1></noscript>
    <div id="wrap">
    <h1 id="albumName"
    spry:region="dsGallery">{sitename}</h1>
    <div id="previews">
    <div id="galleries" spry:region="dsGalleries">
    <label for="gallerySelect">View:</label>
    <select spry:repeatchildren="dsGalleries"
    id="gallerySelect"
    onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
    <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
    selected="selected">{sitename}</option>
    <option spry:if="{ds_RowNumber} !=
    {ds_CurrentRowNumber}">{sitename}</option>
    </select>
    </div>
    <div id="controls">
    <ul id="transport">
    <li><a href="#" onclick="StopSlideShow();
    AdvanceToNextImage(true);"
    title="Previous">Previous</a></li>
    <li class="pausebtn"><a href="#" onclick="if
    (gSlideShowOn) StopSlideShow(); else StartSlideShow();"
    title="Play/Pause" id="playLabel">Play</a></li>
    <li><a href="#" onclick="StopSlideShow();
    AdvanceToNextImage();" title="Next">Next</a></li>
    </ul>
    </div>
    <div id="thumbnails" spry:region="dsPhotos dsGalleries
    dsGallery">
    <div spry:repeat="dsPhotos"
    onclick="HandleThumbnailClick('{ds_RowID}');"
    onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
    '{@thumbwidth}', '{@thumbheight}');"
    onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
    <img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
    src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
    width="24" height="24" style="left: 0px; right: 0px;" />
    </div>
    <p class="ClearAll"></p>
    </div>
    </div>
    <div id="picture">
    <div id="mainImageOutline" style="width: 0px; height:
    0px;"><img id="mainImage" alt="main image" /></div>
    </div>
    <p class="clear"></p>
    </div>
    </body>
    </html>
    Fixed reference version:
    <head>
    var dsGalleries = new
    Spry.Data.XMLDataSet("Graphics/galleries/galleries.xml",
    "galleries/gallery");
    var dsGallery = new
    Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
    "gallery");
    var dsPhotos = new
    Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
    "gallery/photos/photo");
    </script>
    Supporting files galleries.xml and Egyptphotos.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <galleries>
    <gallery base="Graphics/galleries/egypt/"
    file="Egyptphotos.xml">
    <sitename>Egypt</sitename>
    <photographer>Don Booth</photographer>
    <contactinfo>
    http://www.adobe.com</contactinfo>
    <email>[email protected]</email>
    <security><![CDATA[]]> </security>
    </gallery>
    ... duplicate China and Paris declarations
    </gallery>
    </galleries>
    <?xml version="1.0" encoding="UTF-8"?>
    <gallery
    base = ""
    background = "#FFFFFF"
    banner = "#F0F0F0"
    text = "#000000"
    link = "#0000FF"
    alink = "#FF0000"
    vlink = "#800080"
    date = "1/10/2006">
    <sitename>Egypt Gallery</sitename>
    <photographer>Don Booth</photographer>
    <contactinfo>
    http://www.adobe.com</contactinfo>
    <email>[email protected]</email>
    <security><![CDATA[]]> </security>
    <banner font = "Arial" fontsize = "3" color =
    "#F0F0F0"> </banner>
    <thumbnail base
    ="../../gallery/galleries/egypt/thumbnails/" font = "Arial"
    fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col =
    "5"> </thumbnail>
    <large base ="../../gallery/galleries/egypt/images/" font
    = "Arial" fontsize = "3" color = "#F0F0F0" border = "0">
    </large>
    <photos id = "images">
    <photo
    path = "egypt_01.jpg"
    width = "350"
    height = "262"
    thumbpath = "egypt_01.jpg"
    thumbwidth = "75"
    thumbheight = "56">
    </photo>
    </photos>
    </gallery>

    Please delete this posting. I've found the full original
    information in the v1.6 pre-release information and will compare to
    that baseline.

  • Need Expertise on Custom Photo Gallery Template

    Hello there - this question isn't really just Mac specific, but I don't see a forum that will post to ALL Photoshop users.
    I'm in need of some help customizing a Photo Web Gallery in Photoshop. I've done one entirely without tables, using my own CSS to style it. My thumbnail page would be similar to the coding for the index page of the Lightbox styled gallery in this tutorial: www.photoshoplab.com/lightbox-web-photo-gallery.html
    However, my problem is that even though my design doesn't use tables, when I'm in the automation dialogue in Photoshop, it still shows the table row and column parameters - greyed out - from the last time a table-based gallery template was used. And Photoshop is using this info to decide how many thumbnails to put on the gallery index page. It simply multiplies the row * column to limit the number of thumbnails on that first page. Very odd and not very nice looking, as it won't finish a row this way.
    I notice the Lightbox styled gallery template does away with the table for the thumbnails as well. How, then can I gain control over showing "X" number of images per thumbnail page? Say I have a gallery of 40 images - how can I show 20, max, per page? Or 10? Or whatever needs to be specified to suit the number of images in that gallery?
    Also, at runtime, Photoshop is stripping some small but important bits of code out of my customized templates. I've tried to put some HTML elements in to force the "previous next" text below the thumbnails, but it gets stripped out during the generation of the gallery.
    The results can be seen here:
    www.springfieldmo.gov/cityconnect/images/galleries/dating/index.html
    Notice that the first thumbnails page shows 21 images. That's because the greyed out row, column info in the automate dialogue was 3 rows of 7 columns.
    Is there any way to get to the actual code that Photoshop runs to generate the galleries? Seems like that's where it would be looking for the table info.
    Any thoughts? I'd sure appreciate any info you can give or point me to someone who has done a pure CSS automated Photoshop gallery.
    Sincerely,
    Christopher Akins
    Web Coordinator
    City of Springfield, MO

    Thanks Curt, In fact I think I have found the files under
    user\Application Data\Adobe\Bridge CS5\Adobe Output Module\MediaGallery\
    I got there as a result of your suggestion and although I didn't find /roaming/ I did find the following directories
    /document1/
    /preview/
    /previewinbrowser1/
    So I am guessing these contain the files I need to work with.  Some of the files are json files which is a bit new to me but I think there is a fair bit of resource around about it.
    Regards, Les

  • Problem in responive photo gallery

    I have inserted the yoxview  photo gallery from this website http://www.yoxigen.com/yoxview/.Here is the code.
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class=""><!-- InstanceBegin template="/Templates/Vestrytemplate.dwt" codeOutsideHTMLIsLocked="false" -->
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Photo Gallery</title>
    <script type="text/javascript" src="yoxview/yoxview-init.js">
    </script>
    <script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
    <script type="text/javascript">
                $(document).ready(function(){
                    $("#thumbnails").yoxview({
                     backgroundColor: 'Blue',
                     playDelay: 5000
    </script>
    <link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">
    <!-- InstanceEndEditable -->
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="CSS/Layout.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <link href="css/flexnav.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
        background-color: #E9E9E9;
    </style>
    <style>
    footer
        min-height: 80px;
        background: #000;
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: #C7E003;
    </style>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>-->
    <script src="jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <!-- Place in the <head>, after the three links -->
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider();
    </script>
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <link href="IE-only.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <script src="respond.min.js"></script>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="LayoutDiv1"><img src="SJV-Images/Banners/LimeGreenheader-new-curved.png"/></div>
      <div id="Nav">
    <div class="menu-button">Navigation</div>
        <nav>
              <ul data-breakpoint="800" class="flexnav">
                <li><a href="">Home</a>
               <!--   <ul>
                    <li> <a href="#content">Sub 1 Item 1</a></li>
                    <li><a href="">Sub 1 Item 2</a></li>
                    <li><a href="">Sub 1 Item 3</a></li>
                    <li><a href="">Sub 1 Item 4</a></li>
                  </ul> -->
                </li>
                <li><a href="">Profiles</a>
                  <ul>
                    <li><a href="">Sub 1 Item 1</a></li>
                    <li><a href="">Sub 1 Item 2</a>
                      <ul>
                        <li><a href="">Sub 2 Item 1</a></li>
                        <li><a href="">Sub 2 Item 2</a></li>
                        <li><a href="">Sub 2 Item 3</a></li>
                      </ul>
                    </li>
                    <li><a href="">Sub 1 Item 3</a>
                      <ul>
                        <li><a href="">Sub 2 Item 1</a></li>
                        <li><a href="">Sub 2 Item 2</a>
                          <ul>
                            <li><a href="">Sub 3 Item 1</a></li>
                            <li><a href="">Sub 3 Item 2</a></li>
                            <li><a href="">Sub 3 Item 3</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="">Photo Gallery</a>
                 <!-- <ul>
                    <li><a href="">Sub 1 Item 1</a></li>
                    <li><a href="">Sub 1 Item 2</a></li>
                    <li><a href="">Sub 1 Item 3</a></li>
                  </ul> -->
                </li>
                <li><a href="">Alumni</a>
                 <!-- <ul>
                    <li><a href="">Sub 1 Item 1</a></li>
                    <li><a href="">Sub 1 Item 2</a></li>
                    <li><a href="">Sub 1 Item 3</a></li>
                  </ul> -->
                </li>
                <li><a href="">Contact Us</a>
              <!--    <ul>
                    <li><a href="">Sub 1 Item 1</a></li>
                    <li><a href="">Sub 1 Item 2</a></li>
                    <li><a href="">Sub 1 Item 3</a></li>
                  </ul> -->
                </li>
              </ul>
            </nav>
      </div> <!-- End div id="Nav"  -->
      <div id="LayoutDiv2">
      <!-- InstanceBeginEditable name="Vestry-Content" -->                     
             <!--   <script>
                if (Galleria) { $("body").text('Galleria works') }
            </script>-->
    <div class="yoxview">
    <h3>   Photo Gallery</h3>
    <a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
        <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
         <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
        <!--<img src="photo1.jpg">
        <img src="photo2.jpg">
        <img src="photo3.jpg">-->
    </div>
    <!--<script>
        Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
    </script>-->
    <!-- InstanceEndEditable -->
    </div>
      <!--
      <div id="footer">This is the content for Layout Div Tag "footer"</div> -->
    </div>
    <footer></footer>
    <script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
    <script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>
    </body>
    <!-- InstanceEnd --></html>
    The plug-in works.But i want to increase the height of the div with the class = yoxview.But i couldn't find the such class.Here is the css.
    /* YoxView v2.0 CSS file */
    #yoxview .yoxview_bottom{ bottom: 0; }
    #yoxview .yoxview_right{ float: right; }
    #yoxview .yoxview_left{ float: left; }
    #yoxview_popupWrap
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 100;
    #yoxview
        position: absolute;
        font-family: Arial, Sans-Serif;
        z-index: 999;
        border: solid 1px #999;
        overflow: hidden;
        font-size: 10pt;
        text-align: left;
        max-height: 1000px;
    #yoxview a img, #yoxview_infoPanel a img{ border: none; }
    #yoxview a:focus{ outline: none; }
    #yoxview div.yoxview_imgPanel{ position: absolute; top: 0; left: 0; }
    #yoxview div.yoxview_mediaPanel
        position: absolute;
        background: #191919;
        width: 100%;
        height: 100%
    #yoxview .yoxview_ctlBtn
        position: absolute;
        z-index: 3;
        display: block;
        text-decoration: none;
        outline: none;
        width: 50%;
        height: 100%;
    #yoxview .yoxview_ctlBtn img
        position: absolute;
        border: none;
        top: 50%;
        margin-top: -22px;
    #yoxview a.yoxview_ctlBtn:focus, #yoxview a.yoxview_ctlBtn:active{ outline: none; outline: none;}
    #yoxview .yoxview_notification
        width: 59px;
        height: 59px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -30px;
        margin-left: -30px;
        z-index: 4;
        opacity: 0.6;
        filter: alpha(opacity=60);
        background-image: url(images/sprites.png);
        background-repeat: no-repeat;
        display: none;
    #yoxview #yoxview_ajaxLoader img
        padding: 13px;
    #yoxview .yoxview_popupBarPanel
        position: absolute;
        z-index: 4;
        min-height: 70px;
        width: 100%;
        right: 0;
    #yoxview #yoxview_menuPanel
        width: 145px;
        height: 42px;
        padding-top: 0px;
        padding-right: 9px;
        position: absolute;
        right: 0;
        background: url(images/sprites.png) no-repeat left -77px;
        background: rgba(0, 0, 0, 0.8);
        -moz-border-radius: 0 0 0 15px;
        -webkit-border-radius: 0 0 0 15px;
        border-radius: 0 0 0 15px;
        top: -42px;
    #yoxview #yoxview_menuPanel a
        display: block;
        width: 45px;
        float: right;
        text-align: center;
        font-size: 0.8em;
        position: relative;
        margin-top: -5px;
        padding-bottom: 13px;
        text-decoration: none;
        font-family: Arial, Sans-Serif;
    #yoxview #yoxview_menuPanel a span{ color: White; display: block; margin-bottom: 3px;  }
    #yoxview #yoxview_menuPanel a.last{ margin-left: 0; }
    #yoxview #yoxview_menuPanel a:focus{ outline: none; }
    #yoxview_infoPanel
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 0;
        color: White;
        z-index: 2;
        overflow: hidden;
    #yoxview_infoPanel #yoxview_infoPanelBack
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        left: 0;
        top: 0;
    #yoxview_infoPanel #yoxview_infoPanelContent
        position: absolute;
        width: 100%;
        z-index: 2;
        top: 0;
        left: 0;
    #yoxview_infoPanel span#yoxview_count
        display: block;
        width: 55px;
        font-size: 0.8em;
        float: left;
        text-align: center;
        padding-top: 8px;
        color: #bbb;
    #yoxview_infoPanel #yoxview_infoText
        margin: 0 55px;
        font-size: 12pt;
        padding: 5px 0;
    #yoxview_infoPanel #yoxview_infoText #yoxview_infoTextDescription
        margin-top: 1em;
        font-size: 10pt;
        padding-bottom: 0.5em;
        max-height: 200px;
        overflow: auto;
        padding-right: 10px;
    #yoxview_infoPanel #yoxview_infoText a, #yoxview .yoxview_error a{ color: #a7d557; text-decoration: none; outline: none; }
    #yoxview_infoPanel #yoxview_infoText a:hover, #yoxview .yoxview_error a:hover{ color: #d5eeaa }
    #yoxview_infoPanel a.yoxviewInfoLink
        display: none;
        opacity: 0.8;
        float: right;
        margin-right: 5px;
        margin-top: 5px;
    #yoxview_infoPanel a.yoxviewInfoLink:hover{ opacity: 1 }
    #yoxview #yoxview_helpPanel
        display: none;
        width: 201px;
        height: 312px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -171px;
        margin-left: -111px;
        z-index: 5;
        color: White;
        padding: 20px;
        padding-top: 10px;
        cursor: pointer;
    #yoxview #yoxview_helpPanel h1{ font-family: Arial Black, Arial, Sans-Serif; font-size: 1em; }
    #yoxview #yoxview_helpPanel p{ margin-top: 80px; }
    #yoxview #yoxview_helpPanel span#yoxview_closeHelp{ display: block; position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; }
    #yoxview .yoxview_error
        display: block;
        text-align: center;
        color: White;
        font-family: Arial, Sans-Serif;
        font-size: 14pt;
        top: 41%;
        width: 100%;
        height: 20%;
        position: absolute;
        padding: 10px;
    #yoxview .yoxview_error .errorUrl{ font-size: 10pt; }
    #yoxview .yoxview_top{ top: 0; width: 50%; }
    #yoxview .yoxview_element{ width: 100%; height: 100%; position: absolute;  border: none; background: #333; }
    .yoxview-thumbnails a
        float: left;
        margin: 4px;
        /* For thumbnails opacity: */
        opacity: 0.8;
        filter: alpha(opacity=80);
    .yoxview-thumbnails a:hover
        /* For thumbnails opacity: */
        opacity: 1;
        filter: alpha(opacity=100);
    .yoxview-thumbnails a img
        /* Set white borders around the thumbnails, instead of the browser's default Blue: */
        border: solid 1px #ffffff;
    .yoxview-thumbnails-details{ margin-bottom: 1em; }
    .yoxview-thumbnails-details h2{ margin-bottom: 0; padding: 0; font-size: 1.2em; font-weight: bold;}
    Where i could increase the height of the div?Pls help me.

    http://www.yoxigen.com/yoxview/usage.aspx#installation
    Please visit this link.Here in the first step,they have said to add class=yoxview.I did the same.But i couldn't find it in CSS.I have added these links.
    <script type="text/javascript" src="yoxview/yoxview-init.js">
    </script>
    <script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
    <script type="text/javascript">
                $(document).ready(function(){
                    $("#thumbnails").yoxview({
                     backgroundColor: 'Blue',
                     playDelay: 5000
    </script>
    <link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">
    HTML Markup
    <div class="yoxview">
    <h3>  Photo Gallery</h3>
    <a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
        <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
         <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
    Please help.

  • Photo Gallery Lightbox Navigation not working

    Hi,
    The previous, next, and close buttons don't seem to be working for some of the photos on this page: http://vanessastone.namastecms.com/media/photos/community for the photo gallery lightbox.  The issue only appears to be happening in Chrome and Safari.  Firefox is working fine.  I looked around in Chrome's Developer tools but didn't find any hints as to why that might be happening.  Any help is greatly appreciated!
    Thanks,
    Jeff

    Sorry InteractiveGuru, it looks like I posted on the wrong thread. The reason the buttons aren't working is because of your CSS regarding your left, right and close buttons are not suitable. You'll want to either revisit your CSS, or revisit how the buttons are formatted (e.g the three <a>'s).

Maybe you are looking for

  • "Copying Music failed. The filename was too long or invalid."

    I've been trying to 'consolidate library' inorder to get all my music held and managed under Itunes so I can delete it from other places on my computer & avoid holding multiple copies (in line with Chris CA's guidance in this thread https://discussio

  • Missing feature at BES 10. Connecting public folder at Microsoft Exchange

    Dear Develpment, one of the different using BB to iOs or Android device was the it was possible to connect to public folder by BES 5.x. So it was possible to syn your public contact folders of all employee of our company. We must do nothing, if data

  • Updating a mutating table

    I have a after row trigger on a table which extracts data from another database through a database link. On insert/update of the row it updates the requisite tables in the database on which it is created.An exception is returned when if the rows are

  • Song library did not completely transfer

    Obtained a new Dell Venue tablet. When I shared from original computer not all of my song library transferred. Why?

  • Frm-92160

    Users are receiving the above error when accessing an app via the Web. Please advise