Help with thumbnail gallery

Hi all,
I'm a noob programmer trying to learn Flash by building my
own site (www.davidfoleyjr.net). For the Pics portion of the site,
I'm trying to create a loader that brings up a category-specific
set of thumbnails into the loader window, which the user would then
scroll over (or click, if necessary) to bring up the full sized
picture. Can this be done? Any help would be greatly appreciated!

Similar Messages

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.

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,

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 dreamweaver gallery - or ext. for gallery

This link is to a template that I found that I really love how the gallery looks... but I am trying to figure out how to create this gallery with thumbnails along the top where you can click on one of the thumbnails on the left first (in the mouse over section) to activate which set of thumbnails you see at the top. Then once you click on one of those thumbnails at the top the image changes in the main section along with the extra 2 or 3 images that you can right or left arrow click to. http://www.templatehelp.com/preset/pr_preview.php?i=20121&pr_code=J3Yh
More info on what I am trying to do. incase that wasn't just jibberish.
The boxes that have the images on the left (which is the mouse over section) I want to be able to click on one of the images for ex they would be listed as performing arts, restaurants, education etc. I would like to be able to click on one then once clicked have a set of thumbnails at the top of the main image that have one thumbnail for each job. so once you click on the job the main image changes to whatever job image I place in there along with still being able to click through more of the same job in that area like it does now.
I am using Dreamweaver CS4... but if you know of an extension that can do that ... that would be great to.
thanks

That's a Flash site, you know? You can't build Flash sites in DW.
If you're really good with JavaScripts, HTML and CSS, you might be able to cobble something together that resembles the Flash site but it won't be exactly the same. Sorry, I don't know of any extensions that would do exactly that.
For some alternate ideas, loook at Project Seven's image gallery magic and their menu systems.
http://projectseven.com
Also look at JAlbum
http://www.jAlbum.net
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

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!

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 & 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;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>

Template help with Flash Gallery

First of all I would like to say that I give everyone on here so much credit for learning flash and actionscipt. I wish I payed attention in HS class so I could understand this better.
I purchased a template from template moster (http://www.templatemonster.com/flash-templates/28019.html) and I am trying to modify it. I am attempting to add 3 other galleries which look exactly like the gallery in the template with the same functions. I figured out how to change the pictures which both the large and thumbnails are being loaded from a portfolio folder outside of the main fla file. I wish the files were in the fla because I am sure it would be a little easier. Can anyone help me with duplicating the gallery page? I am using CS3 and Actionscript 2. If you need a screen shot just ask. Thank you for the help

To add further information to the post above...
When I use the selection tool to drill down into the buttons
it goes from "Scene1" to a "menu" symbol which contains the five
stacked buttons in the stage (again they all display as "About Us"
instead of how they look in a browser). I can then drill down into
each individual button which always goes to the same "btn" symbol
(resulting in a workspace that is viewing Scene1->menu->btn).
When I right-click on any of the five buttons and select "Actions"
in the menu it brings up the Actions - movie clip dialog and there
are no actions specified.
However, when I right click on the parent "menu" symbol and
look at actions they are the following:
onClipEvent (load) {
num = 1;
on (rollOver) {
if (_root.link<>num) {
this.gotoAndPlay("s1");
_parent["bta"+num].gotoAndPlay("s1");
on (releaseOutside, rollOut) {
if (_root.link<>num) {
this.gotoAndPlay("s2");
_parent["bta"+num].gotoAndPlay("s2");
on (release) {
if (_root.link<>num) {
_parent["bt"+_root.link].gotoAndPlay("s2");
_parent["bta"+_root.link].gotoAndPlay("s2");
_root.link = num;
_root.play();
Lastly, I can drill down one further step to
Scene1->menu->btn->btn_0. When I do this the "About Us"
text disappears and just the button background is showing. When I
right click in the workspace there is no "Actions" selection. When
I right click on the frame in the timeline there is an "Actions"
selection but there are no actions specified.
thanks!!
the link to the template:
http://www.templatemonster.com/flash-templates/15895.html

Need help with php gallery

Hi guys,
Thanks for the interest in my post...
I want to make a gallery similar to the one at
http://www.danwheldon.com/gallery.cfm
where the user clicks on an image and it refreshes the current page
bringing up the enlarged version above the rest of the thumbnails.
I've made a .php page and linked the thumbnails like
main.php?pagename=gallery&image=01. The only thing I think I
need is to insert a php script where I will want the enlarged image
to appear.
Can anyone help me on this by any chance? I found the
following script but don't know how to edit it to do what I need:
<img src="images/<?php echo $imgNo; ?>.jpg"
title="Image <?php echo $imgName; ?>" />
Thank you very much and I hope to hear from you.
All the best,
Mark

Spindrift wrote:
> I've made a .php page and linked the thumbnails like
> main.php?pagename=gallery&image=01. The only thing I
think I need is to insert
> a php script where I will want the enlarged image to
appear.
>
> Can anyone help me on this by any chance? I found the
following script but
> don't know how to edit it to do what I need:
>
> <img src="images/<?php echo $imgNo; ?>.jpg"
title="Image <?php echo $imgName;
> ?>" />
<img src="images/<?php echo $_GET['image']; ?>.jpg"
/>
David Powers
Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
Author, "Foundation PHP 5 for Flash" (friends of ED)
http://foundationphp.com/

Help with XML gallery

I have created a picture gallery which is controlled by
thumbnails. Now I wanted to add a function to open the picture
showing, in seperate window, when it is clicked on. But I can't
figure this xml out, someone please help me.

*BUMP* Anyone!?

Help with thumbnails

I would like all my raw clips to have a thumbnail instead of the quiktime logo so I can sort through them better.
How would I do this?

If you can show us the page or the html, we might be able to
see where
it's gone wrong.
fenwaynomar wrote:
> My teacher wants me to name the thumbnail verison
pic1_thumb. and the bigger
> version of it Pic1_big.. then she wants me to put the
thumbnail it.. then click
> the thumbnail and hit the yellow folder next to the link
field and link it with
> the big one.. I do this but when i try to test it the
big picture doesnt come
> up. PLEASE HELP!
>

Encore 2.0 Help with thumbnail

Hello,
I've created a menu in Photoshop CS3 with the whole (+) and (=1) things.
When I import the menu in Encore, I get these really annoying overlapping buttons.
I understand why, I just need a solution:
I've uploaded a picture of the layout of the menu. Basically I want a new thumbnail
with every new 'Lorem ipsum' text, which stands for the buttons for different videos.
I've tried it in Photoshop with (=1) but the output of the menu doesn't work because
Encore creates a rectangle and the underlaying 'Lorem ipsum' buttons won't work.
Please help me!!!

One other thing, if it's allright to post it here.
Is it normal that eight avi files are 1,79 GB in Encore
and that 67 of the same avi files are 3,8 GB in Nero Vision?
Of course we can talk about all things revolving around DVD authoring (so long as Jeff is in a good mood) and you are asking about En, after all.
Now, when you say that 8 AVI files = 1.79GB in En, and that 67 of the "same" AVI files = 3.8GB in Nero. Tell us a lot more about these AVI files. AVI can contain all sorts of CODEC's with massively different compression schemes. How much the "same" are these files? G-Spot can help you tell. Are their Durations the exact same?
Exactly what are you doing with these 75 +/- files in each program, and how and where are you getting the total size, i.e. 1.79GB vs 3.8GB. Exactly where does this data come from?
Good luck,
Hunt

Help with (simple) gallery

Hi everyone,
Im new to AS so bear with me on this. Im making a really simple website with a few navigation buttons that point to some frames using AS, that is the extent of my AS knowledge - oh I know the stop(); command! Check me out! So as you can see, Im a real novice.
All I want to do is to create an image slideshow the same as this:
http://www.hopkins.co.uk
However, I dont want the thumbnails, I just want a really simple fade in/fade out show of about 8 photos. I only want this on the 'home' section of the site ie you navigate away when you click on one of the buttons.I achieved what I wanted by alpha tweening on the time line but the file size was too big at the end of it (it had 900+ frames to allow for the pauses in between transitions)
My questions to you clever people are:
What method should I use to create this type of gallery so it is clean and compact? And how can I create it with big, hi res images like on the site above?
Any suggestions would be great. I know this has been covered before but it's very hard to find specifically what Im after without having better knowledge of AS 3.0
Thanks
Joe

list your image movieclips in an array, initialize an index i, create function that fades-in (using the tween class) the ith index member and fades-out the ith-1 member, use an onMotionFinished event to start a timer (setTimeout() ) to call your function after incrementing i.

Help with iWeb gallery

Hi all - this is my first post on here but i've used it for help and pointers with iWeb for some time. I'm just creating a website for my design portfolio and would really like to incorporate a gallery like the one that appears at the following link:
http://www.arizona-software.ch/photopresenter/screenshots.html
Does anyone know of what this gallery might be called? My knowledge of web design is extremely limited so if someone could let me know their thoughts (phrased 'for dummies') that would be great.
Many thanks in advance
Sam

Yes it does.
By the way, do you plan to publish to .mac.
Iphoto galleries do have that option as one of about three, but the user would have to select it.
If you haven't tired one you might. I think they look quite nice.
There are several different programs that will accomplish that, but if Iphoto will work for you it would be the easiest as it directly interfaces with Iweb.
There is a little freebe called "flash album exporter" that is a plug-in for Iphoto that will do exactly what you want, but you would have to manually upload and link it, which is not really a big deal.
[http://home.comcast.net/~flashalbumexporter/iphoto/iphoto.html]
The simple viewer option is about the same as what you saw.
good luck

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">

</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">

</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>
    </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 & Rachel 025.jpg" title=""><img src="Mark & 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 & Ruth0202.jpg" title=""><img src="James & 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 & Rachel 311.jpg" width="600px" height="400px" title=""><img src="Mark & 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></div>
</div>
<div class="footer">
    <hr />
    <p align="right" class="container">07794 430 229 //   [email protected]</p>
</div>
</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 thumbnail gallery

Similar Messages

Maybe you are looking for