Help with Photo Gallery

I found this cool photo gallery tutorial
http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm
but I'm having problem to put it together onto my flash web. I wold
like to make portfolio and I want to have several categories. Each
category will have its own photo gallery with animated buttons
loading in each gallery separately onto same area. something
similar to this
http://www.flashmint.com/show-template-1920.html
but where its loading text onto animated banners I want to load my
photo gallery. Any ideas how to put it together? I'm beginner with
action script . I use flash 8 proffesional

rest of the code here:
        <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" class="SpryHiddenRegion">
                <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}"/></a><br /></div>
                <p class="ClearAll"></p>
            </div>
        </div>
        <div id="picture">
            <div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/><br /> Caption:  {pcaption}</div>
        </div>
        <p class="clear"></p>
    </div>
Any help with getting the caption to display would be greatly appreciated.  The Caption {pcaption} does not work,

Similar Messages

  • Help with Photo Gallery using XML file

    I am creating a photo gallery using Spry.  I used the Photo Gallery Demo (Photo Gallery Version 2) on the labs.adobe.com website.  I was successful in creating my site, and having the layout I want.  However I would like to display a caption with each photo that is in the large view.
    As this example uses XML, I updated my file to look like this:
    <photos id="images">
                <photo path="aff2010_01.jpg" width="263" height="350" thumbpath="aff2010_01.jpg" thumbwidth="56"
                   thumbheight="75" pcaption="CaptionHere01"></photo>
                <photo path="aff2010_02.jpg" width="350" height="263" thumbpath="aff2010_02.jpg" thumbwidth="75"
                   thumbheight="56" pcaption="CaptionHere02"></photo>
                <photo path="aff2010_03.jpg" width="350" height="263" thumbpath="aff2010_03.jpg" thumbwidth="75"
                   thumbheight="56" pcaption="CaptionHere03"></photo>
    </photos>
    The images when read into the main file (index.asp) show the images in the thumbnail area and display the correct image in the picture pain.  Since I added the pcaption field to the XML file, how do I get it to display?  The code in my index.html file looks like this:

    rest of the code here:
            <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" class="SpryHiddenRegion">
                    <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}"/></a><br /></div>
                    <p class="ClearAll"></p>
                </div>
            </div>
            <div id="picture">
                <div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/><br /> Caption:  {pcaption}</div>
            </div>
            <p class="clear"></p>
        </div>
    Any help with getting the caption to display would be greatly appreciated.  The Caption {pcaption} does not work,

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

  • I need help with XML Gallery Fade in out transition. somebody please help me :(

    I need help with XML Gallery Fade in out transition. somebody please help me
    I have my post dont want to duplicate it

    The problem doesn't lie with your feed, although it does contain an error - you have given a non-existent sub-category. You need to stick to the categories and sub-categories listed here:
    http://www.apple.com/itunes/podcasts/specs.html#categories
    Subscribing to your feed from the iTunes Store page work as such, but the episodes throw up an error message. The problem lies with your episode media files: you are trying to stream them. Pasting the URL into a browser produces a download (where it should play the file) of a small file which does not play and in fact is a text file containing (in the case of ep.2) this:
    [Reference]
    Ref1=http://stream.riverratdoc.com/RiverratDoc/episode2.mp3?MSWMExt=.asf
    Ref2=http://70.33.177.247:80/RiverratDoc/episode2.mp3?MSWMExt=.asf
    You must provide a direct link to the actual mp3 file. Streaming won't work. The test is that if you paste the URL of the media file (as given in the feed) into the address bar of a browser it should play the file.

  • Need help embedding photo gallery swf into main swf...

    So I am attempting to create a website in flash and have the
    main swf created for that. However, I've also created a photo
    gallery in a separate swf which I want to embed into one of the
    scenes in the main swf. I tried importing directly to stage, but
    quickly realized that the timeline from the photo swf would not get
    carried over. Basically, I know that it has to be accomplished
    using AS, but don't know what that script would be. Any help would
    be appreciated!

    OK, well, that wasn't really a tutorial as much as it was
    just a huge section of code I couldn't make sense of. Anyways,
    instead of loading the gallery externally now I decided to just
    make it in the actual main swf. So, basically, in the section of
    the main swf reserved for the gallery I created an empty movie
    clip, went inside the clip, created layers for script, thumbs and
    photos. The photos themselves were in a movieclip of their own.
    Each photo has a small fade in accomplished by staggering the
    keyframes for each photo with a stop(); action on the last frame of
    each photo where it comes to full opacity. The thumbnails are back
    in the main movieclip where each button has code telling it to go
    to the beginning of each photos transition and play. It is supposed
    to play until it hits that stop action, but it won't play at all.
    Suggestions?

  • Sharing with Photo gallery

    Hello,
    I am unable to email photos from Photo Gallery.  The message says I need to create an association.  I have tried to do this but I can't seem to locate any place to associate an email with the photo gallery program.  Can you help please?

    Photo Gallery is part of Windows Essentials.  It is not a part of Windows 7.  Go to
    http://windows.microsoft.com/en-us/windows-live/essentials for the link to Windows Live Essential Support.
    Also go to
    http://windows.microsoft.com/en-us/windows-live/photo-gallery-share-photos-email-faq
    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread. ”

  • Urgent Help with Image Gallery

    Hi,
    I really need help with an image gallery i have created. Cannot think of a resolution
    So....I have a dynamic image gallery that pulls the pics into a movie clip and adds them to the container (slider)
    The issue i am having is that when i click on this i am essentially clicking on all the items collectively and i would like to be able to click on each image seperately...
    Please see code below
    var xml:XML;
    var images:Array = new Array();
    var totalImages:Number;
    var nbDisplayed:Number = 1;
    var imagesLoaded:int = 0;
    var slideTo:Number = 0;
    var imageWidth = 150;
    var titles:Array = new Array();
    var container_mc:MovieClip = new MovieClip();
    slider_mc.addChild(container_mc);
    container_mc.mask = slider_mc.mask_mc;
    function loadXML(file:String):void{
    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.load(new URLRequest(file));
    xmlLoader.addEventListener(Event.COMPLETE, parseXML);
    function parseXML(e:Event):void{
    xml = new XML(e.target.data);
    totalImages = xml.children().length();
    loadImages();
    function loadImages():void{
    for(var i:int = 0; i<totalImages; i++){
      var loader:Loader = new Loader();
      loader.load(new URLRequest("images/"+String(xml.children()[i].@brand)));
      images.push(loader);
    //      loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgress);
         loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
    function onComplete(e:Event):void{
    imagesLoaded++;
    if(imagesLoaded == totalImages){
      createImages();
    function createImages():void{
    for(var i:int = 0; i < images.length; i++){
      var bm:Bitmap = new Bitmap();
      bm = Bitmap(images[i].content);
      bm.smoothing = true;
      bm.x = i*170;
      container_mc.addChild(bm);
          var caption:textfile=new textfile();
          caption.x=i*170; // fix text positions (x,y) here
       caption.y=96;
          caption.tf.text=(xml.children()[i].@brandname)   
          container_mc.addChild(caption);

    yes, sorry i do wish to click on individual images but dont know how to code that
    as i mentioned i have 6 images that load into an array and then into a container and i think that maybe the problem is that i have the listener on the container so when i click on any image it gives the same results.
    what i would like is have code thats says
    if i click on image 1 then do this
    if i click on image 2 then do something different
    etc
    hope that makes sense
    thanks for you help!

  • Help with photo albums Please

    Hi, i really need some help with my pictures, I've only got a very basic understanding of how my phone works and have somehow put a load of albums on my phone when i plugged it into the computer-I want to delete some of them off the phone but cannot work out how to do it, when i plug my phone in i can find the photo tab but cannot actually see the pictures and can't see any delete button!!! Please can someone help me, basic explanations would be gratefully recieved xxxx

    The photo sync is one way: computer to phone. To remove photos, synced to your phone, remove the check marks next to the albums/folders under the photos tab in itunes & hit the apply/sync button. They will be removed from your phone. You cannot delete photos that were synced to your phone, directly on your phone. The easiest way to manage photos synced to your phone is to create albums or folders on your computer. Move whatever photos you want on your phone into these albums/folders & then select them under the photos tab in itunes to sync to your phone. You can then remove or add photos to these various albums/folders on your computer & the itunes sync process will update your phone every time you sync.

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

  • Need help with Photo Stream

    I am having issues with Photo Stream and iPhoto when the iPhoto library is stored on a Drobo NAS. When I access the library stored on the NAS I see Photo Stream on the menu and when I access the library I get a  message that tells me I need to switch Photo Stream to this Library. I did select to switch Photo Stream over to this NAS library and I did get a big blue button that is suppose to start Photo Stream but when I push it nothing happens.
    I have contacted Apple support and they said that this is the way Photo Stream works and recommended that I submit a request to have this feature added at Apple\Feedback, if it is something I would like to have. They said if enough people request this feature they will add it but that Photo Stream does not currently support an iPhoto library stored on a remote NAS or shared network drive.
    My question is has anyone found a work around for this?  If you would like to have this feature added to Photo Stream can you please submit your request to Apple so they will add it, perhaps a little sooner than later?

    I checked today and this issue has been solved with the latest iPhoto update from Apple. I am running iPhoto 9.2.3 on my Snow Leopard Server which is sharing a Drobo NAS. I am also running iPhoto 9.2.3 on my MBP running Lion and I can now open my iPhoto Library and Photostream will work with the library and even automatically create events and move all my Photostream pictures into these events within the Library. I can then close the Library on my MBP and open the same Library from my Snow Leopard server and the new Events are there and I can move them around with no problem. Thank you Apple for this fix.   Even though I cannot deal with Photostream directly from the Snow Leopard server this is a very eligant work around.

  • Help with Photo booth

    IS there a way that I can turn off the flash that happens when i take pictures with photo booth?
    I was also wondering if the camera records video?
    Thank you!

    Hello Sarah CMac
    To disable Photo Booth flash, hold shift while you click.
    BTW, holding option disables the seconds countdown. You can use both at once if desired.
    Photo Booth 2 that comes with Leopard adds video recording with "effects" and sound. If you do not want to upgrade to Leopard, you can use WebcamTweaker for "effects" videos or any of the apps that can record video or movie clips from this list of Some Applications You Can Use With iSight for video without Photo Booth's "effects."
    EZ Jim
    PowerBook 1.67 GHz w/Mac OS X (10.4.11) G5 DP 1.8 w/Mac OS X (10.5.1)  External iSight

  • Need help with JavaScript "Galleria" gallery coding

    I am trying to create a clickable gallery with the filmstrip either on the top or on left hand side for people to click to see my portfolio. I want the first photo to be auto loaded. I downloaded the javascript from;
    http://galleria.aino.se/
    I have the coding for;
    galleria.js
    galleria.classic.js
    jquery.min.js
    I try the basic tutorial given on the website http://galleria.aino.se/
    but it seem more coding are needed.
    I want the similar gallery as shown on the above website without the black void space on the side of the large photo. I do not want the Rewind and Fastforward buttons as shown on the side of the large photo (not on the thumbnail)
    I have tried downloading few similer files and trying to use their html coding but there werent the full tutorial.
    The coding below only shows two small photos left top of the page without the large photo either on top of them.
    I dont understand much about coding. Only been doing this for like few months and still learning but i am stuck now. Much apperciated if you can help me out here with what code need to go where. Many thanks.
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="test/jquery.min.js"></script>
    <script src="test/galleria.js"></script>
    <script>Galleria.loadTheme('test/galleria.classic.js');</script>
    <script>$('.gallery').galleria();</script>
    </head>
    <body>
    <div class="gallery">
    <a href="_images/home/Bridge.png"><img src="_images/home/Bridge.png" width="100"></a>
    <a href="_images/home/Haz_Restaurant.JPG"><img src="_images/home/Haz_Restaurant.JPG" width="100"></a>
    </div>
    </body>
    </html>

    Using the same files, i have found a different code where they place the tumbnails at the bottom of the slideshow rather than on the side. Here is the code;
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>Galleria Demo 1</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="test/galleria.css" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" src="test/jquery.min.js"></script>
        <script type="text/javascript" src="test/jquery.galleria.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
            $('ul.gallery_demo').galleria({
                history   : true, // activates the history object for bookmarking, back-button etc.
                clickNext : true, // helper for making the image clickable
                insert    : '#main_image', // the containing selector for our main image
                onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
                    // fade in the image & caption
                    image.css('display','none').fadeIn(1000);
                    caption.css('display','none').fadeIn(1000);
                    // fetch the thumbnail container
                    var _li = thumb.parents('li');
                    // fade out inactive thumbnail
                    _li.siblings().children('img.selected').fadeTo(500,0.3);
                    // fade in active thumbnail
                    thumb.fadeTo('fast',1).addClass('selected');
                    // add a title for the clickable image
                    image.attr('title','Next image >>');
                onThumb : function(thumb) { // thumbnail effects goes here
                    // fetch the thumbnail container
                    var _li = thumb.parents('li');
                    // if thumbnail is active, fade all the way.
                    var _fadeTo = _li.is('.active') ? '1' : '0.3';
                    // fade in the thumbnail when finnished loading
                    thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                    // hover effects
                    thumb.hover(
                        function() { thumb.fadeTo('fast',1); },
                        function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
        </script>
        <style media="screen,projection" type="text/css">
        /* BEGIN DEMO STYLE */
        *{margin:0;padding:0}
        body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80% /140% georgia,serif;}
        h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
        a{color:#348;text-decoration:none;outline:none;}
        a:hover{color:#67a;}
        .caption{font-style:italic;color:#887;}
        .demo{position:relative;margin-top:2em;}
        .gallery_demo{width:702px;margin:0 auto;}
        .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
        .gallery_demo li div{left:240px}
        .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
        #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
        #main_image img{margin-bottom:10px;}
        .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
        .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
        .info p{margin-top:1.6em;}
        </style>
    </head>
    <body>
    <h1>Galleria Demo 01</h1>
    <div class="demo">
    <div id="main_image"></div>
    <ul class="gallery_demo_unstyled">
        <li><img src="test/img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
        <li><img src="test/img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
        <li class="active"><img src="test/img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
        <li><img src="test/img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
        <li><img src="test/img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
        <li><img src="test/img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
        <li><img src="test/img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
        <li><img src="test/img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
        <li><img src="test/img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
    </ul>
    <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
    </div>

  • Issues with Photo Gallery

    In my gallery, the photos resize and display fine. However,
    during the transition period, there is wierd overlap corruption of
    the images. Instead of going immediately to the div holder's
    background image, it pre-loads the selected picture, distorts it,
    and then flashes the background color before morphing to the
    correct picture.
    Also, I have links as my gallery listing. For some reason,
    when I click on the gallery links, the associated pictures do not
    load until thumbnail action is taken.
    Any ideas?
    Here
    is the latest version of this issue

    Kin --
    Thank you for the response. I figured out a different
    solution to the wierd image problem. However, I am still unable to
    get the images to shift automatically when the gallery is changed.
    For example, if I am viewing a vertical image under the "flowers"
    gallery and then switch to the "waterfalls" gallery, the vertical
    image remains until I click on one of the waterfall thumbs.
    Any ideas on how to get this to go? It does it in the demo,
    but I cannot figure out what I need to do with my code to enable
    this. Thanks for your help, as always, with this. I really
    appreciate it!

  • Help with lightbox gallery widget

    Hello
    I built a website for my photography business and used the lightbox gallery widget. I'm not massively HTML minded so I tend to build in design view and just tweak the HTML code.
    The gallery is here: http://www.emmarichards.co.uk/gallery.html
    When you click on one of the photos, it is not working properly, it just takes you to another webpage with just the image. It worked fine in the live view. I'm looking at it in IE, not sure which version but a fairly up to date one I think. I've also checked it using the Mozilla browser and having the same problem. How can I rectify this please? The pages code is as follows:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Barnsley Wedding Photographer - Emma Richards</title>
    <style type="text/css">
    <!--
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #4E5869;
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #99BADB;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    color:#414958;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
    color: #4E5869;
    text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #FFFFFF;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
    .header {
    background-color: #ffffff;
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
    padding: 10px 0;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
    padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
    padding: 10px 0;
    background-color: #ffffff;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    -->
    </style>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/lightbox.js" type="text/javascript"></script>
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    <link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2127022: #gallery */
      .lbGallery {
       /*gallery container settings*/
       background-color: #ffffff;
       padding-left: 180px; 
       padding-top: 20px; 
       padding-right: 180px; 
       padding-bottom: 20px; 
       width: 900px;
       height: auto;
       text-align:center;
      .lbGallery ul { list-style: none; margin:0;padding:0; }
      .lbGallery ul li { display: inline;margin:0;padding:0; }
      .lbGallery ul li a{text-decoration:none;}
      .lbGallery ul li a img {
       /*border color, width and margin for the images*/
       border-color: #ffffff;
       border-left-width: 0px;
       border-top-width: 0px;
       border-right-width: 0px;
       border-bottom-width: 0px;
       margin-left:5px;
       margin-right:5px;
       margin-top:5px;
       margin-bottom:5px:
      .lbGallery ul li a:hover img {
       /*background color on hover*/
       border-color: #ffffff;
       border-left-width: 0px;
       border-top-width: 0px;
       border-right-width: 0px;
       border-bottom-width: 0px;
      #lightbox-container-image-box {
       border-top: 0px none #ffffff;
       border-right: 0px none #ffffff;
       border-bottom: 0px none #ffffff;
       border-left: 0px none #ffffff;
      #lightbox-container-image-data-box {
       border-top: 0px;
       border-right: 0px none #ffffff;
       border-bottom: 0px none #ffffff;
       border-left: 0px none #ffffff;
    /* EndOAWidget_Instance_2127022 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2127022" binding="#gallery" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">
    <div class="container">
      <div class="header">
        <div align="center">
          <p><img src="1title 2.png" alt="emma richards barnsley wedding photographer" width="1144" height="368" /></p>
          <p><a href="about.html"><img src="1.png" alt="about emma richards barnsley wedding photographer" width="143" height="46" border="0" /></a><a href="weddings.html"><img src="1.weddings.png" alt="weddings information barnsley photographer" width="162" height="46" border="0" /></a><a href="gallery.html"><img src="1.gallery.png" alt="barnsley wedding photographer image gallery" width="162" height="46" border="0" /></a><a href="pricing.html"><img src="1.pricing.png" alt="barnsley wedding photographer pricing information" width="162" height="46" border="0" /></a><a href="engagements.html"><img src="1.engage.png" alt="engagement photography couples shoot barnsley" width="221" height="46" border="0" /></a><a href="http://emmarichardsuk.blogspot.com"><img src="1 blgo.png" alt="emma richards wedding photography blog" width="105" height="45" border="0" /></a><a href="contact.html"><img src="1 contact.png" alt="contact emma richards" width="162" height="46" border="0" /></a></p>
        </div>
        <!-- end .header --></div>
      <div class="content">
        <div id="gallery" class="lbGallery">
          <div align="center">
            <ul>
              <li> <a href="2.ABBIE AND KID.jpg" width="600" height="400" title=""><img src="2.ABBIE AND KID.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
              <li> <a href="2.R AND M CUTTING CAKE.jpg" title=""><img src="2.R AND M CUTTING CAKE.jpg" width="150" height="100" alt="Park Inn wedding" "wath" "barnsley" "photography" /></a>
              <li> <a href="alex laura 1 (5).jpg" title=""><img src="alex laura 1 (5).jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
              <li> <a href="alex laura 1 (8).jpg"><img src="alex laura 1 (8).jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a> </li>
              <li> <a href="tree closer.jpg" width="600px" height="400px" title=""><img src="tree closer.jpg" width="150" height="100" alt="" /></a> </li><br />
              <li> <a href="11.jpg" width="600" height="400" title=""><img src="11.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
              <li> <a href="10.jpg" title=""><img src="10.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
              <li> <a href="James Ruth Church128.jpg" title=""><img src="James Ruth Church128.jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a>
              <li> <a href="2.ABBIE GROUP.jpg"><img src="2.ABBIE GROUP.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a> </li>
              <li> <a href="12-5.jpg" width="600px" height="400px" title=""><img src="12-5.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li><br />      
              <li> <a href="alex laura 1 (3).jpg" width="600" height="400" title=""><img src="alex laura 1 (3).jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
              <li> <a href="confetti crop.jpg" title=""><img src="confetti crop.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
              <li> <a href="Mark &amp; Rachel 025.jpg" title=""><img src="Mark &amp; Rachel 025.jpg" width="150" height="100" alt="park inn wedding" "wath" "barnsley" "photography" /></a>
              <li> <a href="Abbie Ben 0336.jpg"><img src="Abbie Ben 0336.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a> </li>
              <li> <a href="Abbie Ben 0309.jpg" width="600px" height="400px" title=""><img src="Abbie Ben 0309.jpg" width="150" height="100" alt="barnsley wedding photographer" "first kiss" /></a> </li><br />
              <li> <a href="laughing 2.png" width="600" height="400" title=""><img src="laughing 2.png" width="150" height="100" alt="whitley hall wedding" "sheffield wedding photography" /></a>
              <li> <a href="2.double.jpg" title=""><img src="2.double.jpg" width="150" height="100" alt="Park Inn wedding" "wath" "barnsley" "photography" /></a>
              <li> <a href="132.jpg" title=""><img src="132.jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a>
              <li> <a href="Abbie and Ben 0621.jpg"><img src="Abbie and Ben 0621.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li>
              <li> <a href="Abbie Ben 0320.jpg" width="600px" height="400px" title=""><img src="Abbie Ben 0320.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li><br />
              <li> <a href="Abbie Ben 0011 copy.jpg" width="600" height="400" title=""><img src="Abbie Ben 0011 copy.jpg" width="150" height="100" alt="bouquet" "barnsley wedding photographer" /></a>
              <li> <a href="James &amp; Ruth0202.jpg" title=""><img src="James &amp; Ruth0202.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
              <li> <a href="alex laura 1 (4).jpg" title=""><img src="alex laura 1 (4).jpg" width="150" height="100" alt="barnsley wedding photographer"  /></a>
              <li> <a href="123.jpg"><img src="123.jpg" width="150" height="100" alt="rotherham" "park inn wedding" "wath" "barnsley" "photography" /></a> </li>
              <li> <a href="Mark &amp; Rachel 311.jpg" width="600px" height="400px" title=""><img src="Mark &amp; Rachel 311.jpg" width="150" height="100" alt= "rotherham" "Park Inn wedding" "wath" "barnsley" "photography" /></a> </li><br />
            </ul>
          </div>
        </div>
        <div align="center">
        <script type="text/javascript">
    // BeginOAWidget_Instance_2127022: #gallery
      $(function(){
       $('#gallery a').lightBox({
        imageLoading:   '/images/lightbox/lightbox-ico-loading.gif',  // (string) Path and the name of the loading icon
        imageBtnPrev:   '/images/lightbox/lightbox-btn-prev.gif',   // (string) Path and the name of the prev button image
        imageBtnNext:   '/images/lightbox/lightbox-btn-next.gif',   // (string) Path and the name of the next button image
        imageBtnClose:   '/images/lightbox/lightbox-btn-close.gif',  // (string) Path and the name of the close btn
        imageBlank:    '/images/lightbox/lightbox-blank.gif',   // (string) Path and the name of a blank image (one pixel)
        fixedNavigation:  false,  // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
        containerResizeSpeed: 400,    // Specify the resize duration of container image. These number are miliseconds. 400 is default.
        overlayBgColor:   "#ffffff",  // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
        overlayOpacity:   0,  // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
        txtImage:    'Image',    //Default text of image
        txtOf:     'of'
    // EndOAWidget_Instance_2127022
        </script><!-- end .content --></div>
    </div>
      <div class="footer">
        <hr />
        <p align="right" class="container">07794 430 229 //   [email protected]</p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>

    emmarichards4 wrote:
    Do I need to have the same path as in my root folder, so for example within my Public folder with my host, have a 'script's folder and then put the 'jquery.js' file within that or should that not matter?
    All paths (the route from the parent file to the dependent file) are crucial.
    If the path is not correct, the required file will not be found and the effect will not work.
    There's no need to upload files individually and manually place them into remote folders. DW handles all file and folder paths for you if you use the Files panel.
    For example, http://www.emmarichards.co.uk/scripts/lightbox.js = 404 error. The file still does not exist on the server in that location.
    You should be able to click on the css and scripts folders locally, click Put and all files in those folders will be uploaded correctly.

  • Help with photos in project???!!

    Hello,
    I just bought an iMac about a month ago so that I could edit home movies and create DVD's of family vacations/events to share with my family. I have done this in the past on the PC with Pinnacle Movie Studio Software but it was buggy and more of a pain than it was worth.
    So far pretty impressed with the iMac and FCE seems like it has potential. However I keep having problems with still photos in my video.
    Here is what I have done - created a new project using the NTSC 48k template (not at my desktop now so I'm working off memory as far as naming). I captured all of my Sony Mini DV footage to the PC and dropped it into my timeline and edited it. Went smoothly. At the end of my movie I want to insert a "recap of the trip" using the still photos that I took with my digital camera and use the ken burns effect and transitions with music playing. My plan is to render and burn to DVD with iDVD for playback on a 1080p 60 inch plasma.
    My photos are jpegs saved on my hard drive. I cropped them and adjusted color, etc in CS2. I didn't do anything as far as re-sizing them etc in photo shop as this is a little new to me and I didn't want to mess them up. Do I need to resize them for FCE? Seems like the program does this? If I need to resize them what size should I make them? Remember I want to be able to zoom in by creating the burns effect.
    I have taken the photos and imported them into FCE. I drop them on the timeline and push play and everything looks great. When I start adding transitions with and applying the ken burns effect with key points the image plays fine by itself in the viewer window. However, when I watch the project play back in the canvas the stills appear very jumpy - not like a frame is missing in the render - the still literally looks like it jumps up and then settles back down. This is driving me nuts! FCE has to be able to do this smoothly. Can anyone provide me with a simple step by step on what settings I should be using for my sequences, etc to make this work. The settings really mess me up and I must be missing something.
    I do have Tom's book but I can't find anything to help me with this issue. It is driving me nuts. Thank you in adavnce!

    Thank you for the link. I went there and read the information. I still have questions:
    Assuming I am using just still photos (let's keep it easy at first and assume no video) - what settings do I use for FCE under easy set up and for the sequence? Photos are jpg images shot with a digital camera that have been saved on my computer for a few years. I want to output my contents to DVD using iDVD and play back on a 1080p plasma tv.
    Do I have to edit or resize the photos in photoshop first? It sounds like I can just import them into FCE and that it should work. I am not working with advanced photoshop images - just simple jpg images - no layers. The chart on page 2 of the link above says for 1080i - rectangular size N/A and square size 1920x1080. What does this mean? Is this telling me to resize my images to 1920x1080 before I import into FCE? If I want to use the Ken Burns effect and zoom should I double this to 3840x2160?
    If someone can tell me step by step what they would do with the settings for FCE if they wanted to create a still photo slideshow with music, transitions and pan and zoom I would appreciate it. Again - source material is jpg images and I want to output to DVD using iDVD to display on a 1080p plasma tv. Also assuming that you had a standard landscape photo shot with a 4 megapixel camera what steps would you go through to prep it for FCE in Photoshop - if any?
    Sorry that I am asking for a detailed example but I learn much better that way - after I am able to get one photo into an acceptable format for FCE the rest will be easy.
    Has anyone actually created a successful slide show in FCE using transitions and the Ken Burns effect or do they get jitters in their photos as well - the image doesn't appear to flow smoothly.

Maybe you are looking for

  • Mail is corrupting PDF attachments

    about 25% of the PDF files I receive as attachments show as an icon in the top part of the msg, but also show as unreadable hex "text" in the bottom part of the msg. If I click on the PDF ICON in Mail.app, it opens fine in PREVIEW.APP IF I forward an

  • PSD files get destroyed

    Hi, I'm using Aperture 2.1.2 for only a few days now, and Photoshop CS4. When I bought Aperture, it said that it was able to handle PSD files. Now, here's my problem: 1. I drag (or import, no difference) a PSD file (made with Photoshop CS3) with all

  • Knowing the power of the antenna wifi Nokia E55

    Hello I would like to know more about the wifi antenna in my Nokia E55, I know my antenna model, serial number, the power you have,..... "dbi" has all the information about the wifi of my phone, because I do not find that information in the phone, I

  • Function module for conversion in basic unit of measure....

    Hi, Can someone give me a function module, which will convert the Unit of measure into basic unit of measure Say a a material has 3 CA (Cases) in a PO and the conversion factor(UMREZ in table MARAM) for CA for that material is 4 and converison for MP

  • SLD Data Supplier

    Hello Experts, Can you please clarify below queries regarding SLD Data supplier.   in Visual admin>server>services-->SLD data supplier 1.How to reterive Http settings(host,port,username,password) and CIM client generation settings((host,port,username