Easily Editable CSS Image Gallery Template

I'm trying to create a template to hold product thumbnails in Dreamweaver MX 2004 that would allow me to put new products at the beginning of the gallery page... using a float; left: to bump the thumbnails down to the next 'row'... See attached files
in the current galleries, I've used tables, but find that new products have to be put at the end of all table cells or I would have to move everything... and would like to be able to easily take thumbnails off the page without leaving a gap... I'm having difficulty wrapping my mind around repeatable editable optionals as well.
I also want to be able to have the footer at the bottom of the page no matter how many products are on that page and thought I had changed the css for the footer from absolute to relative, but that doesn't seem to be working.
Any thoughts/tips/hints would be greatly appreciated.

This might be overkill in this particular situation, but this is exactly the type of scenario for which many will use InDesign server, front-ended with a web client to merge designated content into a template and ultimately yield a PDF file for either display, print, or both!
The problem of a “typical office worker” using InDesign is that it has a very steep learning curve and there is so much that can go wrong (not that this can't and doesn't happen with Microsoft Publisher or Word as well)!
One other possibililty would be either a script and/or custom plug-in for InDesign to perform the daily fill-in and/or replacement with minimal user interaction.
- Dov

Similar Messages

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

How to select and edit background images in templates?

I open a template in pages ('elegant brochure' for example) and there is a background image that takes up the entire background of the page. When I click on the image, instead of being surrounded by the 6 little circles (that allow resizing) there are little x's. I can't move or change the image. I thought this was a master object, but it does not have blue circles, and I have 'master objects selectable'. I find it a little annoying that I want to use a prepared template but edit it beyond what apple gives me. Why can't I have more control (short of making a template from scratch)? How do i edit the images that have x's surrounding them?

easiz,
The x's indicate that it's a locked object. Click on Arrange > Unlock to edit it.
-Dennis

CSS Image Gallery - DEFAULT IMG

Not really a DW question but as I've had no replies on the appropriate forum, I thought I'd ask you guys for some help.
I'm using http://www.dynamicdrive.com/style/cs...e-gallery/P30/ but am unsure how to position a default image in the space where the enlarged img goes.
At the moment I have a large white space when none of the thumbnails are being activated.
Many thanks for any help.
Paul
CSS
.gallerycontainer{
position: relative;
width:780px;
height:auto;
margin-left:260px;
margin-top:100px;
border:1px solid #999999;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
padding:3px 7px 3px 7px;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid #E6E6E7;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
HTML
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br /> Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T3.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L3.jpg" width="500" height="333" /><br />
Sushi for dinner anyone?</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T4.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L4.jpg" width="500" height="333" /><br />
Run wild with horses.</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
</div>

Change this -
<div class="gallerycontainer">
to this -
<div class="gallerycontainer">
<div style="position:absolute; left: 270px; z-index: 40;"><img src="your_default_image"></div>

CS 5.5 Image Gallery Template help

I think there is a simple fix to my issue, but as this is my first time using Flash and Actionscript, I cannot seem to figure it out on my own.
I am using the template under Media Playback>Advanced Photo Album. If you look at the template's code you will see it uses a hardcoded XML string for the variable to read in the images. What I need it to do is read the first line of an external XML file to be stored in the same directory as the Flash file. The first and only line of data that will be in the XML file is going to be in identical format to the string used for the pre-written hardcoded XML string. Which is this:
"<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>".
I need this to read this way because I have a bash script on my server which auto generates an xml file with the first line formatted this way based on the file names within the directory, in which I will be placing images to be viewed in the slideshow.
Thanks in advance for any help

The file is currently named "images.xml".
Here is the pieces of code, that involve the variable I need changed, from a new template (since I have messed around with my current project trying to load in an external file based on sites I've found by Googling, the code has been changed a bit)
import fl.data.DataProvider;import fl.events.ListEvent;import fl.transitions.*;import fl.controls.*; // USER CONFIG SETTINGS =====var secondsDelay:Number = 2;var autoStart:Boolean = true;var transitionOn:Boolean = true; // true, falsevar transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Randomvar hardcodedXML:String="<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>";// END USER CONFIG SETTINGS // DECLARE VARIABLES AND OBJECTS =====var imageList:XML = new XML();var currentImageID:Number = 0;var imageDP:DataProvider = new DataProvider();var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);// END DECLARATIONS // CODE FOR HARDCODED XML =====imageList = XML(hardcodedXML);fl_parseImageXML(imageList);// END CODE FOR HARDCODED XML // FUNCTIONS AND LOGIC =====function fl_parseImageXML(imageXML:XML):void{ var imagesNodes:XMLList = imageXML.children(); for(var i in imagesNodes) { var imgURL:String = imagesNodes[i]; var imgTitle:String = imagesNodes[i].attribute("title"); imageDP.addItem({label:imgTitle, source:imgURL, imgID:i}); } imageTiles.dataProvider = imageDP; imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source; title_txt.text = imageDP.getItemAt(currentImageID).label;}
However, if it will be more helpful I will post the entire template code below here, though I believe the sections above are all that would be needing a change.
import fl.data.DataProvider;import fl.events.ListEvent;import fl.transitions.*;import fl.controls.*; // USER CONFIG SETTINGS =====var secondsDelay:Number = 2;var autoStart:Boolean = true;var transitionOn:Boolean = true; // true, falsevar transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Randomvar hardcodedXML:String="<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>";// END USER CONFIG SETTINGS // DECLARE VARIABLES AND OBJECTS =====var imageList:XML = new XML();var currentImageID:Number = 0;var imageDP:DataProvider = new DataProvider();var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);// END DECLARATIONS // CODE FOR HARDCODED XML =====imageList = XML(hardcodedXML);fl_parseImageXML(imageList);// END CODE FOR HARDCODED XML // EVENTS =====imageTiles.addEventListener(ListEvent.ITEM_CLICK, fl_tileClickHandler);function fl_tileClickHandler(evt:ListEvent):void{ imageHolder.imageLoader.source = evt.item.source; currentImageID = evt.item.imgID;}playPauseToggle_mc.addEventListener(MouseEvent.CLICK, fl_togglePlayPause);function fl_togglePlayPause(evt:MouseEvent):void{ if(playPauseToggle_mc.currentLabel == "play") { fl_startSlideShow(); playPauseToggle_mc.gotoAndStop("pause"); } else if(playPauseToggle_mc.currentLabel == "pause") { fl_pauseSlideShow(); playPauseToggle_mc.gotoAndStop("play"); }}next_btn.addEventListener(MouseEvent.CLICK, fl_nextButtonClick);prev_btn.addEventListener(MouseEvent.CLICK, fl_prevButtonClick);function fl_nextButtonClick(evt:MouseEvent):void{ fl_nextSlide();}function fl_prevButtonClick(evt:MouseEvent):void{ fl_prevSlide();}slideshowTimer.addEventListener(TimerEvent.TIMER, fl_slideShowNext);function fl_slideShowNext(evt:TimerEvent):void{ fl_nextSlide();}// END EVENTS // FUNCTIONS AND LOGIC =====function fl_parseImageXML(imageXML:XML):void{ var imagesNodes:XMLList = imageXML.children(); for(var i in imagesNodes) { var imgURL:String = imagesNodes[i]; var imgTitle:String = imagesNodes[i].attribute("title"); imageDP.addItem({label:imgTitle, source:imgURL, imgID:i}); } imageTiles.dataProvider = imageDP; imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source; title_txt.text = imageDP.getItemAt(currentImageID).label;}function fl_startSlideShow():void{ slideshowTimer.start();}function fl_pauseSlideShow():void{ slideshowTimer.stop();}function fl_nextSlide():void{ currentImageID++; if(currentImageID >= imageDP.length) { currentImageID = 0; } if(transitionOn == true) { fl_doTransition(); } imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source; title_txt.text = imageDP.getItemAt(currentImageID).label;}function fl_prevSlide():void{ currentImageID--; if(currentImageID < 0) { currentImageID = imageDP.length-1; } if(transitionOn == true) { fl_doTransition(); } imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source; title_txt.text = imageDP.getItemAt(currentImageID).label;}function fl_doTransition():void{ if(transitionType == "Blinds") { TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Fade") { TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Fly") { TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Iris") { TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Photo") { TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25}); } else if (transitionType == "PixelDissolve") { TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Rotate") { TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Squeeze") { TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Wipe") { TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Zoom") { TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25}); } else if (transitionType == "Random") { var randomNumber:Number = Math.round(Math.random()*9) + 1; switch (randomNumber) { case 1: TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25}); break; case 2: TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25}); break; case 3: TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25}); break; case 4: TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25}); break; case 5: TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25}); break; case 6: TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25}); break; case 7: TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25}); break; case 8: TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25}); break; case 9: TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25}); break; case 10: TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25}); break; } } else { trace("error - transitionType not recognized"); }}if(autoStart == true){ fl_startSlideShow(); playPauseToggle_mc.gotoAndStop("pause");}// END FUNCTIONS AND LOGIC
Thanks for any help you can give.

User-managed image gallery in template-based html site?

I've created a simple, template-based html/css site for a client and they've asked for a set of sales pages for their vans and cars. The idea is that there'll be an entry page, which has an itemised list (thumbnail pic, title and a couple of sentences), which then links to individual template-based pages on which the full information is listed.
So far I've given the client a copy of Macromedia Contribute. No problems there. However, it would be great to have a relatively simple image gallery which will display up to, say, 10 pix.
The problem is that without a complex back-end CMS, I need to find a user-friendly (ie, not technical) gallery system which I can either embed into the template, or set up so it can be easily added to a page.
Am I being overly optimistic here, or is there an option (ideally free, of course!) which someone can recommend? My ideal is something that could be accessed and updated through Contribute, but if there's a standalone app which can do it once the page has been created in Contribute, that would be fine.
Thanks in advance.
Trent

I've created a simple, template-based html/css site for a client and they've asked for a set of sales pages for their vans and cars. The idea is that there'll be an entry page, which has an itemised list (thumbnail pic, title and a couple of sentences), which then links to individual template-based pages on which the full information is listed.
So far I've given the client a copy of Macromedia Contribute. No problems there. However, it would be great to have a relatively simple image gallery which will display up to, say, 10 pix.
The problem is that without a complex back-end CMS, I need to find a user-friendly (ie, not technical) gallery system which I can either embed into the template, or set up so it can be easily added to a page.
Am I being overly optimistic here, or is there an option (ideally free, of course!) which someone can recommend? My ideal is something that could be accessed and updated through Contribute, but if there's a standalone app which can do it once the page has been created in Contribute, that would be fine.
Thanks in advance.
Trent

Image gallery in webcenter using content presenter template

Hi,
I created a content presenter template for image gallery in webcenter.
The images from UCM are not displayed without log in to the webcenter application.
I am getting a error like
" Error calling UCM server associated with repository UCM. The service GET_FILE was called with user anonymous at time 3/18/15 11:12 AM, and returned statuscode -1.
oracle.stellent.ridc.protocol.ServiceException: Unable to download 'HSCSRV154.ALLE006130'. Access denied by records manager "
Once i log in the images are displayed.
What is the problem here?please help.
I am using the latest webcenter extension in jdev 11.1.1.7
Thanks,
chandrasekar M

Hi Vinod,
I tried using af:image like below and its the same issue.I have read in most of the blogs that since this is in the content presenter template, the image has to be displayed using output text with escape set to false.
<af:image source="#{node.propertyMap['REGDEF:Image'].asTextHtml}" id="image5"/>
I am not using <img> anywhere, its just that on the webpage when the image doesnt appear, I tried to see the source of the image using Firebug and it shows following:
<img src="${wcmUrl('rendition','xyz/web')} " alt = "Logo">
Edited by: Swathi Patnam on Jul 13, 2012 6:00 PM

Image gallery with CSS menu

I have a image gallery (slideshow) created with Flash and
XML. My website uses a css/javasript dropdown menu for navigation.
The dropdown menu is hiding behind the slideshow no matter what I
set it's z-index to. Is there something in flash that lets me set
its z-index? I could jsut drop the menu off of the page and give a
return link but that is a workaround and I would much rather stay
consistent with my site. Any help that could be given would be
appreciated.
Mark V.

"mvanneman" <[email protected]> a écrit
dans le message de news:
f9ssu4$346$[email protected]..
>I have a image gallery (slideshow) created with Flash and
XML. My website
>uses
> a css/javasript dropdown menu for navigation. The
dropdown menu is hiding
> behind the slideshow no matter what I set it's z-index
to. Is there
> something
> in flash that lets me set its z-index? I could jsut drop
the menu off of
> the
> page and give a return link but that is a workaround and
I would much
> rather
> stay consistent with my site. Any help that could be
given would be
> appreciated.
try to embed your movie with wmode="transparent"
lea

Editing photo gallery templates

Good day -
I am new to using Bridge, okay I am very old school.
Is there a way to modify the photo gallery templates to include a cusomt logo ? I am using Brige from CS 5.5
Thanks

Is there a way to modify the photo gallery templates to include a cusomt logo ?
Don't use web gallery myself but am afraid that the options for this in Bridge are very limited and they have not improved for several versions (CS6 also does not include a watermark for Web Gallery while the option is there in output to PDF)
So you will have to create your own watermark or logo. When you create an action to do so in Photoshop and create copies of this files you can use those copies for web gallery and save the originals. It is a bit work to create such an action (also Google for this for additional info) but once your action is working you only need to select the wanted files in Bridge, use menu tools /PS / batch / and choose your created watermark action and it all goes automatically

How to insert a widget in a editable region from a template

Hi there,
ok so basically I am trying to create a HTML page from a template i have already designed.
when I try to insert a widget (Lightbox Gallery) in the editable region I get the following error.
"the widget requires code that must be inserted into the head of the document. insertion cannot happen because this document is read only"
I saw a previous thread (http://forums.adobe.com/thread/901299) that had the same problem with a solution but cant seem to make sense of it.
Not exactly sure where and what to paste in the header of the HTML page.
Any help will be much appreciated.
Thanks

Hi Murray,
ha funny you would say that is the exact answer you would give me seeing you posted it
I understand the logic behind it though not sure what i need to copy and where.
Basically i craeted a "dummy page" and inserted the widget-no problem there.
next step- what code do i copy from the dummy page and where do i paste it? in the template or HTML page.
Dummy HTML with widget code
<!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="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/scripts/jquery.js" type="text/javascript"></script>
<script src="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/scripts/lightbox.js" type="text/javascript"></script>
<link href="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
                    .lbGallery {
                              /*gallery container settings*/
                              background-color: #CCC;
                              padding-left: 20px;
                              padding-top: 20px;
                              padding-right: 20px;
                              padding-bottom: 20px;
                              width: 540px;
                              height: auto;
                              text-align:left;
                    .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: #3e3e3e;
                              border-left-width: 10px;
                              border-top-width: 10px;
                              border-right-width: 10px;
                              border-bottom-width: 20px;
                              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: 10px;
                              border-top-width: 10px;
                              border-right-width: 10px;
                              border-bottom-width: 20px;
                    #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>
<div id="gallery" class="lbGallery">
<ul>
    <li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>
    <li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>
    <li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>
    <li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>
    <li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>
</ul>
</div>
<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:                     "#999999",                    // (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:                              .6,                    // (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>
</body>
</html>
thanks again

Constructing CSS photo gallery layout

Hi,
I'm on DW CS4 with an intel Mac. I am one (1) table away from having my site be purely CSS without tables.
I have painstakingly placed each thumbnail manually and resized all the heights etc. My Gallery actually looks good in IE 6, much to my surprise.
But in Safari and Firefox, it looks like it's out of the container (Content div) - but I've got this gallery class Div in the editable area of my template in the Content Div, so I don't know what I've done wrong.
http://www.frankbright.com/index1.htm
It would be really great if I could get this past me. I hope I've given enough information. Many Thanks for any assistance,
Frank B.

Firstly I would make all your thumbnails the same dimensions 135px x 108px. This will allow you to wrap all the images in one ul tag and center them on the page. If you use multiple ul tags then you will have to assign each one a different class and give each one a specific width to get it to center the images.
Example of css where the images are all wrapped in one ul tag.
<style type="text/css">

</style>
html showing images wrapped in one ul tag, add the others to the sequence.
<div id="mainContent">
<ul class="gallery">
<li><a href="pages/photoname.htm"><img src="thumbnail.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname2.htm"><img src="thumbnail2.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname3.htm"><img src="thumbnail3.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname4.htm"><img src="thumbnail4.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname5.htm"><img src="thumbnail5.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
<li><a href="pages/photoname6.htm"><img src="thumbnail6.jpg" alt="image description" width="135" height="108" border="0" /></a></li>
</ul>
</div>

ANNC: Image Gallery Magic Now Available

Picture perfect...
Bring your images to life with the most powerful,
feature-rich image
gallery solution available for Dreamweaver: Image Gallery
Magic by
PVII - the leader in creative Dreamweaver extensions. Create
image
galleries from from inside Dreamweaver - in Windows or OS X.
Image
Gallery Magic can create the entire layout for you or you can
insert a
gallery into an existing page. While Image Gallery Magic is
powered by
thoroughly modern CSS and Scripting, we've taken great pains
to ensure
that your gallery will work in all modern browsers (on all
operating
systems) and some key older browsers, such as IE5.x (Windows
and OS X).
http://www.projectseven.com/products/galleries/hgmagic/index.htm
All aspects of your gallery are managed from within the iGM
user
interface window.
Add (append) new images to your gallery. You can use the
automatic build
mode, which leverages the Fireworks image processing engine,
or you can
select images that you've already processed yourself in
Photoshop or any
other image editor.
Delete images or re-order them.
Manage Captions, Descriptions, and a counter - including
where they
appear.
Edit images (the edit command launches your default image
editor and
loads the selected image).
Re-generate thumbnails automatically after editing a
full-size image
(Fireworks interoperability).
Choose a full-size image to load when your page loads.
Select the number of thumbnails to display per row.
Enable smooth-glide scrolling of thumbnail rows.
Choose an animation effect for your full-size images.
Supports Dreamweaver Templates.
Allows direct linking to individual images.
Search-engine friendly.
Accessible - even with JavaScript disabled.
The PVII Team
http://www.projectseven.com

Picture perfect...
Bring your images to life with the most powerful,
feature-rich image
gallery solution available for Dreamweaver: Image Gallery
Magic by
PVII - the leader in creative Dreamweaver extensions. Create
image
galleries from from inside Dreamweaver - in Windows or OS X.
Image
Gallery Magic can create the entire layout for you or you can
insert a
gallery into an existing page. While Image Gallery Magic is
powered by
thoroughly modern CSS and Scripting, we've taken great pains
to ensure
that your gallery will work in all modern browsers (on all
operating
systems) and some key older browsers, such as IE5.x (Windows
and OS X).
http://www.projectseven.com/products/galleries/hgmagic/index.htm
All aspects of your gallery are managed from within the iGM
user
interface window.
Add (append) new images to your gallery. You can use the
automatic build
mode, which leverages the Fireworks image processing engine,
or you can
select images that you've already processed yourself in
Photoshop or any
other image editor.
Delete images or re-order them.
Manage Captions, Descriptions, and a counter - including
where they
appear.
Edit images (the edit command launches your default image
editor and
loads the selected image).
Re-generate thumbnails automatically after editing a
full-size image
(Fireworks interoperability).
Choose a full-size image to load when your page loads.
Select the number of thumbnails to display per row.
Enable smooth-glide scrolling of thumbnail rows.
Choose an animation effect for your full-size images.
Supports Dreamweaver Templates.
Allows direct linking to individual images.
Search-engine friendly.
Accessible - even with JavaScript disabled.
The PVII Team
http://www.projectseven.com

ANNC: Image Gallery Magic for Dreamweaver and Fireworks

Picture perfect...
Bring your images to life with the most powerful,
feature-rich image
gallery solution available for Dreamweaver-Fireworks users:
Image
Gallery Magic by PVII - the leader in creative Dreamweaver
extensions.
Create image galleries from from inside Dreamweaver - in
Windows or OS
X - using the Fireworks processing engine. Image Gallery
Magic can
create the entire layout for you or you can insert a gallery
into an
existing page. While Image Gallery Magic is powered by
thoroughly modern
CSS and Scripting, we've taken great pains to ensure that
your gallery
will work in all modern browsers (on all operating systems)
and some key
older browsers, such as IE5.x (Windows and OS X).
http://www.projectseven.com/products/galleries/hgmagic/index.htm
All aspects of your gallery are managed from within the iGM
user
interface window.
Add (append) new images to your gallery. You can use the
automatic build
mode, which leverages the Fireworks image processing engine,
or you can
select images that you've already processed yourself in
Photoshop or any
other image editor.
Delete images or re-order them.
Manage Captions, Descriptions, and a counter - including
where they
appear.
Edit images (the edit command launches your default image
editor and
loads the selected image).
Re-generate thumbnails automatically after editing a
full-size image
(Fireworks interoperability).
Choose a full-size image to load when your page loads.
Select the number of thumbnails to display per row.
Enable smooth-glide scrolling of thumbnail rows.
Choose an animation effect for your full-size images.
Supports Dreamweaver Templates.
Allows direct linking to individual images.
Search-engine friendly.
Accessible - even with JavaScript disabled.
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a
crumbling
mountain road at 90 miles per hour secure in the knowledge
that repairs
are scheduled for next Tuesday".

I just don't want to be standing below that one! 8)
Thanks, Peter - they've been at it for a while.
Thanksgiving of 1977, my girlfriend (now wife) and I spent
the holidays with
them in Yellowstone Park (Gardner, MT) 'shooting' the bighorn
rams 'duke it
out' during rutting season. I have to say, that was quite a
spectacular
experience. Seeing those guys butt heads from as close as
several hundred
yards away was awesome. The impact was still as load as a
shotgun....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"PJR" <[email protected]> wrote in
message
news:[email protected]...
> Wow Murray, I'm impressed. I had no idea you had such
talent in the
> family.
> Some truly stunning images. I like #34 in the Wildlife
gallery. No idea
> what
> it is but it/he/she looks to be in a bit of a pickle :-)
>
> Peter
> _________________________
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
> | STUPENDOUS!
> |
> | See here -
> |
> |
http://www.wildimages.biz
> |
> | --
> | Murray --- ICQ 71997575
> | Adobe Community Expert
> | (If you *MUST* email me, don't LAUGH when you do so!)
> | ==================
> |
http://www.dreamweavermx-templates.com
- Template Triage!
> |
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
> |
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> |
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> | ==================
> |
> |
> | "Linda R." <[email protected]> wrote in message
> | news:[email protected]...
> | > It's amazingly amazing. :-)
> | >
> | > --
> | > Linda Rathgeber ACE ::: PVII
> | >
http://www.projectseven.com
> | > Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
> | > CSS Newsgroup:
news://forums.projectseven.com/css/
> |
> >
> | > Adobe Community Expert - Fireworks
> |
> >
> | > Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm
> |
> |
>
>

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Easily Editable CSS Image Gallery Template

Similar Messages

Maybe you are looking for