Lightbox script conflicting with image rotator script

Hope someone can help with this....
Basically I have added a Lightbox gallery, which is all working as it should here -
http://www.goodsafariguide.com/new/gallery.php
However, the large photos can render underneath the two sets of rotating images - the ones near the top of various resorts, and the one on the left hand side showing sponsor's logos. It only seems to do it sometimes with the set at the top, but always with the Award Sponsors one.
If it doesn't show with the page as it loads, you can see what I mean by scrolling down until the Awards Sponsors graphic is about halfway down the screen.
So my question is really just to ask if there's a way of ensuring that the Lightbox photos do appear over everything else on the page?
Thanks.

HI Ian, It looks right to me now in both FireFox and IE7. I haven't checked in IE8, which does have some Javascript interpretation problems. Hopefully you are not running into those here.
Not specifically for this problem, but, for general css managablity and neatness, I usually try to group my z-index levels by either tens or hundreds, according to application. That is, If I have layers,
I will use z-index: 10 for the first layer then anything inside that layer that might need a z-index will get 11, 12, etc.
and z-index 0 for the second layer with anything inside it using 21, 22, etc.
After that, I'll use 100 for javascript layers, and anything controlled by them that need indexing will get z-inde: 110, 120, etc.
Then use 200 for the next JS layer, and so on.
A lightbox that covers the whole page will get z-index: 1000, with nesteed elements getting 1100, 1200, etc.
This allows me to keep it straight in my mind how everything overlaps, as well as make finer adjustments where needed, without interfering with any layers above or below the one I'm concerned with.
Of course, it's rare that it gets very complicated, but I like to keep this as a good habit for myself since clients (even if I'm the client) have a way of surprising you with extra functionality requests after you've gotten something built.

Similar Messages

Problem with image rotation. Images are distorted.

Here is the story:
I import images. Some of the need to be rotated because the camera not always records rotation properly. So I rotate them in LR. Everything is fine so far. But when I want to edit the rotated file in PS (CS2) problems arise.
Either LR does not send information about image rotation or PS does not recognize it. The image opens in PS as it was initially shot so in order to work on it properly I need to rotate it in PS again. When I return to LR the thumbnail looks fine but the develop module stretches or distorts the image.
As far as I remember I dodn't have such a problem a week ago so what could be the cause?

I am also having this problem, again using Jpegs. If I Right click in LR and choose "Edit Original" in Photoshop CS, the photo appears correctly oriented in PS. I edit it (in this case using PTLens to remove distortion and then cropping) and save the file.
LR now displays it correctly in the Library module, but stretched in the Develop Module. The edges of the image and the grey pinstripe around it also flash grey a couple of times a second while displaying stretched.
I tried reading metadata from file, and this deleted all my LR edits (not just ratings etc) to the file but didn't fix the problem.
Any more ideas? This doesn't happen if I edit a copy of the original file, but don't really want to duplicate all images shot on a wide angle lens. Is this something in the way PS CS re-writes the orientation information to a jpeg, or how LR reads it?
Sam

Working with images - Rotation and Movement

Hello there,
I have this problem that I cant seem to solve:
I need to be able to move an image arround and there are restrictions to where image should be able to move: at any given time, when dragging, image should always cover whole body of a given border_container, this is simply achieved by sending a rectangle to the startDrag function, which will specify where the image is allowed to move. I got that part right, and its working, the problem arrise when I try to rotate the border_container (with the image), it should still be only possible to drag image so it all the time covers the body of the border_container, but I don't know how to do it.
Code I use looks something like this:
image.startDrag(getImageDragRectangle());
protected function getImageDragRectangle():Rectangle
     return new Rectangle(
          this.width-image.contentWidth + x,
          this.height-image.contentHeight + y,
          Math.abs(this.width-image.contentWidth),
          Math.abs(this.height-image.contentHeight));
Edit: image is not inside the border_container (not sure how relevant it is..)
Could anyone help me out here and give me any hints or suggestions how I could fix it?

You would have to write the image to a temporary file so that the browser could read it off the server. Browsers do not have access to the database, so there's no way to get the image from the database to the browser without using some sort of interim solution.
~Jer

Image Rotation Problem in LR 3.2RC

Anyone else having an issue with image rotation in Lightroom 3.2C?
Here's what happens:
I import images from my card. There are a combination of images taken horizontally and vertically. The vertical images come in sideways (horizontally). This is no big deal: maybe the cameras I was using in this case (Olympus E-PL1 and Panasonic GF1) don't properly mark the orientation.
So, in Grid view, I select one of the improperly orientated images and click the "Rotate Photo Left" arrow in the toolbar. Here's where it gets weird. Instead of rotating the image 90-degrees counter clockwise, the thumbnail rotates about 45-degrees, so now it's crooked in Grid view. However, on my second monitor, the image now looks properly orientated.
I've tried rotating using the menu (Photo menu / Rotate Left) and got the same result. If I repeatedly rotate, it ends up in all sorts of odd positions in grid mode.
What's up with this? Is it just me?
Alan
PhotoCitizen.com

Restarted Lightroom and all looks good now. I'll be interested to see if the problem returns next time I import images.
UPDATE: I spoke too soon. Closed LR3 and opened it again. No, the cockeyed thumbnails are not saved at their odd angles. But they still don't match the image shown on my 2nd monitor (or on my main monitor either if I go to Loupe View). The Grid view image might show the vertical image lying on its side (horizontal), even though the 2nd monitor shows it in the correct orientation.
This happens with horizontal images too if I try to rotate them - something I tried just now but wouldn't normally need to do.
Trying to rotate the thumbnail again results in the cockeyed thumbnail. If I then CLICK on that thumbnail, it straightens out, but never in the correct orientation. Here's a screen grab:
Something seriously wrong here. Something that NEVER happend in Lightroom 3 until I installed version 3.2RC. So, I doubt that it's a video card problem - looks like a bug to me.
Alan
PhotoCitizen.com

Photoshop CS5 Image Rotation Problem

Hi:
I have recently found out that I am having a problem with image rotation in CS5. If I have a Background layer and jump the layer to duplicate it and then set the jumped layer to Flip Horizontal both the jumped layer AND the Background layer are flipped horizontally as if they are linked in some way. The only work around that I could come up with was to duplicate the document, flip the layer in the duplicate and then combine the documents. It works but what a pain. As anybody else experienced this problem?
Herman R.

Charles:
My Background was locked and only the jumped layer was selected.
However, the "problem" grows more intriguing. I tried using Duplicate Layer rather Command J (is there a difference between these two??) and was pleasantly surprised to find that the problem disappeared!! I then went back to Command J and still had the same problem. To make a long story short, I went back and forth several time and then even the jumped layer worked as it should. It was as if it had "learned" the correct behavior! I tested it now ony several documents and all is fine. Does this make any sense to you?
Herman R.

Problems after image rotating!

Hi all!
I'm having problems with image rotating..well actually drawing after image rotating.
After I've rotate an image and have painted it, I'll have to paint another image. Problem is that the second image suppose to be painted normally, but now it rotates too. Please help me.
example:
Graphics2D g2 = (Graphics2D)g;
fHeight = INumb.getHeight(this)/2;
fWidth = INumb.getWidth(this)/2;
g2.translate(x, y);
g2.rotate(Math.toRadians(dAngle),fWidth,fHeight);
g2.translate(-x, -y);
g2.drawImage(INumb,x,y,this);
/*now this next image is suppose to be painted normally, but now it just spinns around (I've got thread in this program*/
g.drawImage(IScreen,0,0,this);
how do I fix this problem?
Thanks advance

Thanks again, but I still have a problem. here is a code:
IScreen = createImage(getSize().width, getSize().height);
BGroundWin = IScreen.getGraphics();
public void paint(Graphics g)
//first I'm drawing all kinds of stuff to the BGroundWin
BGroundWin.drawString(.....);
//and now I'll have to paint this INumb image, wich is spinning around
Graphics2D g2 = (Graphics2D)g;
fHeight = INumb.getHeight(this)/2;
fWidth = INumb.getWidth(this)/2;
g2.translate(x, y);
g2.rotate(Math.toRadians(dAngle),fWidth,fHeight);
g2.translate(-x, -y);
//drawing this spinning Image to the BGroundWin
BGroundWin.drawImage(INumb,x,y,this);
/*now I'm drawing the whole screen,but WHAT DO I HAVE TO DO TO AVOID OTHER PARTS ROTATING(only INumb suppose to rotate*/
g.drawImage(IScreen,0,0,this);
I've tryed many differend ways, but for some reason(too dumb I guess) I can't make it work. If I don't draw rotated image to the BGroundWin screen flashes. if draw it there everything rotates.
If you could help me, I would be very thankful.

Looking for jquery lightbox script that stretches image to fill viewport

There are a lot of lightbox scripts out there, but most of them seem to favor static-sized images.
I'm surprised that I haven't been able to find too many of these scripts allow for images to make maximum use of a viewport's dimensions. In other words, lightbox-style scripts that will fit the target image inside the viewport (while retaining the image's native proportions), whatever size said viewport may be.
I can easily imagine everyone from graphic designers, to painters, to photographers jumping on such a tool. After all, there's nothing worse than looking at a 500px image on a 1920px display. It makes the work feel small, and by proxy, the work's author look small.
Granted, for the images to not appear stretched, the native size of the image would have to be larger than needed for most visitors, but portfolio websites aren't high-traffic websites. They're solely visited by potential employers and clients, and loading time isn't much of a concern anymore with today's average home broadband speeds topping 1mb/s.
Ideally, the script would grey-out the website, and display an image to match 95% of the viewport's X or Y resolution (whatever is smallest) while retaining the image's native proportions.
Does anyone know where I can find such a script, preferable in jquery (since I'm already using it on my website)?

Finally found one! -> http://www.shadowbox-js.com
I've been testing it out, and it does exactly what I described above. It's great.

Image rotation with fade effect

I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the 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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>

I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>

Image Rotation with AE SDK

Hello all,
I am wondering if someone could suggest a desription of image rotation using Adobe AE SDK - in a Forum entry or in some other related document. While some elements of rotation may be considered available in SDK sample projects - Shifter for all pixels, CCU for individual pixels manipulation - I will appreciate more details for variable subpixel processing and neighbouring pixel interpolation for variable row-by-row shift. It is assumed the angle of rotation is fixed during the effect, and there are no worries about the appearance of out-of-border picture elements since there is a background. Speed will not be an issue as well.
Thank you in advance.

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

Promoted links with Image Carousel (Rotating Banner)

Hi,
I am using promoted links webpart. I want to have cycle of images. For eg: I have 10 images . With the slider , I can go to next image horizontally. Once I reach the 10th image,there won't be any next option. I want to display the 1st image after
the 10th. Means, the sliding should be never ending. How can I achieve this. I think I can use javascript to override the default promoted links functionality. Please suggest on how to do this. Thank you

Hi,
According to your post, my understanding is that you want to achieve rotating banner for promoted links web part.
With JavaScript, it will be easier to implement such a web part.
Here are two links with code demos for your reference:
http://www.codeproject.com/Articles/667584/Image-Rotator-in-JavaScript
http://jsfiddle.net/jtbowden/UNZR5/1/
You can also take use of these jQuery image plugins in your project:
http://www.jssor.com/index.html
http://www.webdesignerdepot.com/2011/08/25-jquery-image-galleries-and-slideshow-plugins/
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support

How to use Image Rotator with Firefox??

Since the latest update of Firefox , my image Rotator will not show my images in my forum. They work fine if I use IE but I much prefer to use Firefox as my browser.
IPlease help, I don't want to use IE.
Thanks in advance.

Make use of Firefox Addons
*https://addons.mozilla.org/en-us/firefox/addon/rotate-image/

Spry Conflicts with LightBox and ThickBox?

i have tried to use both Lightbox2 and Thickbox on a page
with a Spry dataset and both will not work (they work fine on
non-Spry pages). It's just a simple gallery-style page. Any ideas
on how to make them compatible?

Sorry for the confusion, but I do have it set up correctly on
my local machine. I only posted the HTML file so you could download
it. I have all the included files in the right locations here
(because it works using either SPRY 1.5 or Slimbox when I test it).
Spry is definitely conflicting with Slimbox. I just made a
simple test file, got slimbox working and slowly added the Spry
pieces. It broke when I added the spry:region call in the div:
<div id="content" spry:region="portfolio_xml">
I don't understand these people that say they are using Spry
and Slimbox without issues. Would be nice to see an example.

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ 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. */
           /* 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. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
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: #42413C;
          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: #6E6C64;
          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;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ 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: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* 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 navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ 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;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

Image rotation in contact sheet

Hi
I've just come accross a problem when creating a contact sheet with images that were organised and rotated using Bridge.
When creating contact sheets I like to have the thumbnails rotated the correct way up. So I deselect 'rotate for best fit' but after the process is finished I realise that the sheet has been created with the thumbnails in landscape view regardless of the images that are portrait.
I've also tried selecting the 'rotate for best fit' but the same thing happens.
Can anyone help me?

Based on your post, you're using the InDesign contact sheet.
Bridge does not rotate the image. It sets a metadata flag. Photoshop recognizes this flag, InDesign CS3 does not (I haven't tried it in CS4 yet).
I will be writing a new version of the contact sheet script over the next few weeks.
The features I will be adding:
Ability to save multiple dialog settings
Improved dialogs
Heed rotation metadata
Bring back the ability to include subfolders
Regards
Bob

Image rotation working in template, but nowhere else

Hi,
I'm relatively new to Dreamweaver.
I have a page with some rotating images, created following a Communitymx recommendation (http://www.communitymx.com/content/article.cfm?cid=651FF).
The website template (http://www.johnaverill.com/templates/main_template.dwt) seems to rotate images perfectly; however, image rotation on index.html and the others will not work.
Any help or recommendations would be greatly appreciated. Thanks, Paul

osgood_
ah, you are correct. sorry, I didn't catch that I was i am just posting the same old apparent bad code (index.html).
I did create index_2.html and rename it to index.html per your instructions of Mar 5 (i've actually done it twice now). Pictures not rotating with the index_2 or the new index.html either.
Also noticed recreating the index continues to get me the extra:
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
the template seems to be putting this in there new index for some reason.
New index here:
<!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>John Averill - Welcome</title>

<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#maincontent {
width:915px;
height:auto;
z-index:1;
left: 114px;
top: 351px;
margin: 20px auto 0px;
.container .footer table tr td h6 {
color: #FFF;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
/* pw - removed old code
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
// Comma separated list of images to rotate
var imgs = new
Array('_images/1.jpg','_images/2.jpg','_images/3.jpg','_images/4.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 3000;
var counter = 0;
function preloadImgs(){
   for(var i=0;i<imgs.length;i++){
     MM_preloadImages(imgs[i]);
function randomImages(){
   if(counter == (imgs.length)){
     counter = 0;
   MM_swapImage('rotator', '', imgs[counter++]imgs[i]);
function randomImages(){
   if(counter == (imgs.length)){
     counter = 0;
   MM_swapImage('rotator', '', imgs[counter++]);
   setTimeout('randomImages()', delay);
</script>


</head>
<body onload="preloadImgs();randomImages();">
<div class="container">
<div class="header">
    <div align="center">
<img src="_images/1.jpg" name="rotator" width="960" height="300" id="rotator" />
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
<li><a href="partners.html">Our Underwriters</a></li>
<li><a href="claims.html">Claims</a></li>
<li><a href="markets.html">Industry Focus</a></li>
<li><a href="assignments.html">Assignments</a></li>
<li><a href="_clienttestimonials/testimonials.html">Client Testimonials</a></li>
<li><a href="resources.html">Resources</a></li>
      </ul>
    </div>
    
</div>
<div class="content">
<h1> </h1>

<div id="maincontent">
<p><img src="_images/john_averill_bw.jpg" alt="" width="98" height="122" align="right" /></p>
<p> </p>
<h1><img src="_images/johncaverill.jpg" alt="" width="313" height="80" id="Image3" /></h1>
<h3>Insurance and Risk Management for Aircraft/Aerospace and Defense Companies</h3>
<p align="justify">Welcome, this is an online bio for John C. Averill. This site also has a description of my capabilities, services offered and successes</p>
<p align="justify">FIDUCIARY ROLE</p>
<p align="justify">My team and I take our fiduciary role as insurance brokers and risk consultants seriously. I am held accountable to a select group of risk management professionals who have an enormous amount of wisdom and knowledge about the property and casualty insurance world, providing my team and me consistent guiding principles. Due to our fiduciary role, we do not publicize our clients list but we do have several letters from clients on file as part of this site, see Client Testimonials.</p>
<p align="justify">CONFIDENCE IN THE PROCESS</p>
<p align="justify">The process of designing a risk management strategy and purchasing insurance should be comprehensive. The focus should be on pre-engineering claims payments. You should have total confidence in your broker and insurance company. After a claim has occurred is not the time to second guess the dollars you spent on insurance premiums and the commissions or fees you paid a broker. </p>
<p align="justify">PHILOSOPHY</p>
<p align="justify">Our philosophy and goal is to never have a client have an uncovered claim that he / she failed to insure. We have developed   processes and procedures to determine exposures, forecast claims and efficiently purchase the needed insurance coverage.</p>
<p align="justify"><strong>SERVICES OF AEROSPACE AND DEFENSE DIVISION</strong></p>
<p>Insurance Brokerage</p>
<p>Risk Analysis (Internal Risk Resource Data Base)</p>
<p>Travel Risk Management analysis</p>
<p>Global Travelers Group </p>
<p>Submission Preparation</p>
<p>Benchmarking Analysis</p>
<p>Contractual Review</p>
<p>Loss Control</p>
<p>Direct Access to all major insurance companies</p>
<p>Internal claims adjustors</p>
<p>Quarterly Newsletter </p>
<h1> </h1>
</div>

<h1> </h1>
</div>
<div class="footer">
    <table border="0" align="center">
      <tr>
        <td width="906" height="5" bgcolor="#004C90"><h6>Aviation News</h6></td>
        <td width="906" height="5" bgcolor="#004C90"><h6>News on John</h6></td>
        <td width="906" height="5" bgcolor="#004C90"><h6>Quick Help</h6></td>
      </tr>
      <tr>
        <td width="906" height="25" valign="top"><h5 align="left">
          <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.aero-news.net%2Fnews%2Frssfeed.xml&am p;num=3&utf=y" charset="UTF-8" type="text/javascript"></script>
          <noscript>
          <a href="View" _mce_href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.aero-news.net%2Fnews%2Frs sfeed.xml&num=3&utf=y&html=y">View">http://feed2js.org//feed2js.php?src=http%3 A%2F%2Fwww.aero-news.net%2Fnews%2Frssfeed.xml&num=3&utf=y&html=y">View RSS feed</a>
          </noscript>
        </h5>
        <p align="left"> </p></td>
        <td width="906" height="25" valign="top"><h5>Averill speaks at 2011 Risk and Insurance Management Society annual conference in Vancouver on Aviation Loss Control. </h5>
        <h5>Averill appointed to National Business Aviation Association Insurance Committee. </h5></td>
        <td width="906" height="25" valign="top">
          <h5 align="left"><a href="claims.html">Claims Information</a></h5>
<h5 align="left"><a href="contacts.html">Contact Me</a></h5>
        </td>
      </tr>
    </table>
    <p><img src="_images/ioa_aerospace_logo.jpg" width="150" height="70" alt="ioa_logo" /></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Lightbox script conflicting with image rotator script

Similar Messages

Maybe you are looking for