Gallery 'Titles'
I'm confused about photo 'titles' in Gallery:
1. If I opt to add 'Titles' does that mean the original filename will change to the new 'title'.
2. If not, then is the 'title' really a 'caption' ? and if so is it accessible/ useable elsewhere - say in Slideshows within IPhoto?
3 If I DON"T opt to have titles when I first publish a folder to gallery can I add them later - or must I delete and republish?
(I'd also love to add a soundtrack to my Gallery shows - but that's another topic! - has anybody found a workaround for that?)
If you select the option to show photo titles then the file name (as the default) or title that you change will be displayed beneath the thumbs in the web gallery online.
One method of changing the titles of a number of photos is to first put the title you want to use in the description field that's in the info pane at the lower left hand corner. Then apply the free Applescript to replace the title with the comments. This is also a way of getting titles for slideshows.
If you don't opt at first and then change you don't have to delete, just click on the publish button
If you want to revert the title back to the original file name just use the Photos->Batch Change->Title menu option to revert. The script can be found here.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've written an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 08 libraries. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.
Similar Messages
-
Needed: variable weblinks in flash web gallery title & caption fields
I know that one can put a fixed URL as custom text into a LR flash web gallery title or caption fields and simply click on that field in a gallery and go to that website. However, that URL is fixed and shows up for all images in the gallery. I would like the ability to have that URL vary by image. That is, I want to be able to setup custom text for a title or caption gallery field that inserts an image's certain metadata value(s) within a URL string. E.g., have LR web gallery custom text of the form:
click here for foobar
result in the browser going to URL held in the current image's title metadata.
This almost works now (LR v1.4) ... Such a custom text title displays correctly. And if I left click on it and choose "copy link", the correct URL is in fact there. Unfortunately a right click doesn't take me there as it would if the custom text was a constant URL string, instead of having one or more embedded image metadata tokens.whoops, I didn't know that my post's example custom text string would be interpreted as a hyperlink :>) Here's the example text without the enclosing "a brackets".
href="{title}">click here for foobar -
Variable weblinks in Flash web gallery title & caption fields
I know that one can put a fixed URL as custom text into a LR flash web gallery title or caption fields and simply click on that field in a gallery and go to that website. However, that URL is fixed and shows up for all images in the gallery. I would like the ability to have that URL vary by image. That is, I want to be able to setup custom text for a title or caption gallery field that inserts an image's certain metadata value(s) within a URL string. E.g., be able to enter for these LR Flash web gallery fields custom text of the form:
#A href="{title}">click here for foobar#click here for foobar#/A#
where "#" = enclosing html brackets
and where {title} is an image's LR title metadata (e.g., "http://www.foobar.com")
Left clicking on such a custom field should take the browser to webpage whose URL is held in the current image's title metadata.
This almost works now (LR v1.4) ... Such a custom text title displays correctly (i.e., just an underlined "click here for foobar"). And if I right click on it and choose "copy link", the correct URL from that image's metadata is in fact there. Unfortunately a left click just doesn't take the browser there.
This capability would be useful for providing image info which either won't fit (e.g., extended caption info) or is technically not easy to place (e.g., a dynamic *.mov pano view) on an image's web gallery page.Just a comment about the web link in general -- Make sure your URL link actually works in the live /internet world. I have found that it doesn't. It looks great on your computer but when you actually build the web gallery, the link doesn't go anywhere.
-
Gallery title text cut off and cover image not updating
Hello,
I've been struggling with this for a couple of weeks now, and it's driving me mad. I've been making a book in iBook Author on my iMac (10.10.2). When I preview it in iBooks on the mac it all looks fine, but when I send it to my iPad2 (iOS 8.2), which I do via dropbox, the front cover image reverts to the default for the template I choose, and gallery and interactive widget title text gets cut off (see attached pic) regardless of the size I make it, or the indent I specify.
I've tried deleting the book several times, restarted the iPad, and whatever I do it still appears the same.
I'd be grateful for any suggestions.
Cheers,
Kev.Hi Christine,
When you say " It's not there when viewed outside of Cp/swf. Using v5.5.l", does that mean this problem only occurs in a specific output?
Try this -- Go to preferences-- SWF Size and Quality and under customer, uncheck Advance Project Compression, republish the course and check the results.
Thanks,
Anjaneai -
Has anyone noticed that the titles of a "Web Gallery" album don't show up in Safari using the "Mosaic" view, but do appear below the photo using Firefox (and are also there using the latest Internet Explorer on a PC). This assumes you checked the "Show photo titles" option when you published the album.
JayJay:
I'm using Safari 3 and the titles do show up under the large photo in the mosaic mode. The only mode that the titles do not display is the carousel. It's the same for Firefox except the carousel gives me the Quicktime icon grayed out. I guess I don't have the QT plugin for Firefox.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've written an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 08 libraries. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file. -
Can I Change HTML Web Gallery Title & Caption Fonts in LR2?
If so, how?
I don't think you can change the name, but you can put the gallery in a subdirectory on your site and link to it there, that way you don't have to rename it. That's what I do, I have each of my galleries in their own directory and the main page in the root, all with their own index.html.
-
Align title in bridge web gallery, change font of image names.
I have a web gallery that was created in Adobe Bridge (slide show template). I have most of the customization done that I want.... except for 2 issues:
1. I would like the gallery title to be right aligned rather than the default left. I have, in the past accomplished this... but for the life of me, I can't figure out how I did it now! Any help would be appreciated.
2. I have given the images names.... how do I change the font color of these image names that appear?
Thanks! Any help is appreciated.I haven't used the Bridge galley, but my first guess would be dig into the gallery's CSS. It's either in a CSS doc or in the head of the gallery pages, but it's sure to be in CSS somewhere. This would be for colors and font anyway,,, I don't know if Bridge formats wilt CSS or tables, you just have to open the documents in Dreamweaver to see.
Lawrence Cramer - *Adobe Community Professional*
http://www.Cartweaver.com
Shopping Cart for Adobe Dreamweaver
available in PHP, ColdFusion, and ASP
Stay updated - http://blog.cartweaver.com -
Adobe Bridge CS6, Output to HTML Gallery coding issue.
Adobe Bridge CS6, Output to HTML Gallery coding issue.
I have created the html, JavaScript, css file using the output function in Bridge CS6, which nicely generates the coding, pages, folders and files. I can edit the html files such as gallery title, name, etc., in Dreamweaver CS6 just fine and preview them in a selected browser (both chrome and IE) and everything works fine.
When I ftp upload the files and directories into my hosting account (Go Daddy), the images do not show up. The file table appears but the thumbs images does not appear and when selected to preview the larger image, it does not appear either. I have not altered the file structure at all. Go Daddy says it is a coding issue, but I cannot fine any errors.
Have you seen this issue before? All Adobe help research have failed. Any suggestions??Have you asked on Go Daddy site for help in uploading Adobe Bridge script? Just to say it is coding is not helpful.
-
PS gallery linked to Dreamweaver does not show up once on pub. server
i created a photoshop gallery and linked it to my website (Dreamweaver) under construction (as im learning); it shows up fine when i preview it on browser from my computer location, however, it does not show up once on the public server. any help as to the direct problem with this link/file/coding, etc... would be greatly appreciated....
site >>>> http://paulrosal.com/ >>>>> CLICK ON "ART"
******************************CHECK OUT CODING RIGHT HERE******************************
<!-- saved from url=(0013)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>gallery</title>
<style>
body,html {
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
height: 100%;
width: 100%;
</style>
<!-- Active Content Workaround Support File -->
<script src="resources/AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
return -1;
</script>
<script language="JavaScript" type="text/javascript">
var startImg = getQueryVariable("startImg");
//alert(startImg);
</script>
<!-- Flash Detection Script Block -->
<script language="JavaScript" type="text/javascript">
<!--
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
on error resume next
Dim swControl, swVersion
swVersion = 0
set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
if (IsObject(swControl)) then
swVersion = swControl.GetVariable("$version")
end if
VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
// NS/Opera version >= 3 check for Flash plugin in plugin array
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
descArray = flashDescription.split(" ");
tempArrayMajor = descArray[2].split(".");
versionMajor = tempArrayMajor[0];
versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
} else {
flashVer = -1;
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
// Can't detect in all other cases
else {
flashVer = -1;
return flashVer;
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
reqVer = parseFloat(reqMajorVer + "." + reqRevision);
// loop backwards through the versions until we find the newest version
for (i=25;i>0;i--) {
if (isIE && isWin && !isOpera) {
versionStr = VBGetSwfVer(i);
} else {
versionStr = JSGetSwfVer(i);
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
tempArray = versionStr.split(" ");
tempString = tempArray[1];
versionArray = tempString .split(",");
} else {
versionArray = versionStr.split(".");
versionMajor = versionArray[0];
versionMinor = versionArray[1];
versionRevision = versionArray[2];
versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24
versionNum = parseFloat(versionString);
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
return true;
} else {
return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
// -->
</script>
</head>
<body><div align="center" style="width:100%; height:100%">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values entered above in "Globals"
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Location visited after installation is complete if installation is required
var MMredirectURL = window.location;
// Stored value of document title used by the installation process to close the window that started the installation process
// This is necessary to remove browser windows that will still be utilizing the older version of the player after installation is complete
// DO NOT MODIFY THE FOLLOWING TWO LINES
//document.title = document.title.slice(0, 47) + " - Flash Player Installation";
document.title = document.title.slice(0, 47);
var MMdoctitle = document.title;
// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasReqestedVersion ) {
var productInstallOETags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
+ 'width="550" height="200"'
+ 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
+ '<param name="movie" value="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=Ac tiveX&MMdoctitle='+MMdoctitle+'" />'
+ '<param name="quality" value="best" /><param name="bgcolor" value="#3A6EA5" />'
+ '<embed src="resources/playerProductInstall.swf?MMredirectURL='+MMredirectURL+'&MMplayerType=Plug In" quality="high" bgcolor="#3A6EA5" '
+ 'width="550" height="300" name="detectiontest" align="middle"'
+ 'play="true"'
+ 'loop="false"'
+ 'quality="best"'
+ 'wmode="opaque"'
+ 'allowScriptAccess="sameDomain"'
+ 'type="application/x-shockwave-flash"'
+ 'pluginspage="http://www.adobe.com/go/getflashplayer">'
+ '<\/embed>'
+ '<\/object>';
document.write(productInstallOETags); // embed the Flash Product Installation SWF
} else if (hasReqestedVersion) { // if we've detected an acceptable version
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'flashvars','baseRefUrl=resources/&groupxml=group.xml&stylexml=style.xml&localText=localT ext.xml&livePreview=false&startImg='+startImg,
'width', '100%',
'height', '100%',
'src', 'resources/gallery',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'opaque',
'devicefont', 'false',
'id', 'gallery',
'bgcolor', '#f7f7f7',
'name', 'gallery',
'menu', 'true',
'allowScriptAccess','sameDomain',
'movie', 'resources/gallery',
'salign', ''
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'This photo gallery requires the Adobe Flash Player.'
+ '<a href=http://www.adobe.com/go/getflash/>Get the free Flash Player here</a>';
document.write(alternateContent); // insert non-flash content
// -->
</script>
<noscript>
// Provide alternate content for browsers that do not support scripting
// or for those that have scripting disabled.
Sorry, this photo gallery requires that scripting be enabled on your web browser and that the Adobe Flash Player be installed.
<a href="http://www.adobe.com/go/getflash/">Download the Adobe Flash Player</a>
</noscript>
</div>
</body>
</html>Are you sure you have uploaded everything in the gallery folder to the correct location. It can't find the index.html page.
-
I'm trying to understand the Photo Gallery demo so I can
replicate the function for use on various sites. I've copied the
html, xml, javascript and some of the photo file elements to my
hard drive. I initially modified the file structures to something
more of my liking, but had some problems with the links. I've since
mimicked the structures so I can reduce the initial errors, but I
am stumped at the var dsGallery and var dsPhotos statements that
dynamically link to the China, Paris and Egypt photo databases. In
the original dynamic definition, DreamWeaver only parses the
dsGalleries XML definition, not defining the dsGallery and dsPhoto
nodes. I wasn't too concerned about that given the variable nature,
but nothing except the pull-down menu and controls displayed in the
browser. DreamWeaver shows correct parsing of the dsGalleries XML,
dsGallery and dsPhoto nodes only when I eliminate the dynamic
linking and set it to one of the static links (Egypt). This fails
in the browser to link to the data, giving a display that shows the
correct number of empty thumbnail frames but without the displayed
photos, no Spry effects, and no large photo display. I'm sure I
have multiple reference errors, but I don't see them. Any ideas?
Initial Photo Demo page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006. Adobe Systems Incorporated. All
rights reserved. -->
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Gallery</title>
<link rel="stylesheet" type="text/css"
href="../css/screen.css">
<script type="text/javascript"
src="../SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new
Spry.Data.XMLDataSet("galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery/photos/photo");
</script>
<script src="../SpryAssets/gallery.js"
type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="wrap">
<h1 id="albumName"
spry:region="dsGallery">{sitename}</h1>
<div id="previews">
<div id="galleries" spry:region="dsGalleries">
<label for="gallerySelect">View:</label>
<select spry:repeatchildren="dsGalleries"
id="gallerySelect"
onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
selected="selected">{sitename}</option>
<option spry:if="{ds_RowNumber} !=
{ds_CurrentRowNumber}">{sitename}</option>
</select>
</div>
<div id="controls">
<ul id="transport">
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage(true);"
title="Previous">Previous</a></li>
<li class="pausebtn"><a href="#" onclick="if
(gSlideShowOn) StopSlideShow(); else StartSlideShow();"
title="Play/Pause" id="playLabel">Play</a></li>
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage();" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height:
0px;"><img id="mainImage" alt="main image" /></div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Fixed reference version:
<head>
var dsGalleries = new
Spry.Data.XMLDataSet("Graphics/galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery/photos/photo");
</script>
Supporting files galleries.xml and Egyptphotos.xml
<?xml version="1.0" encoding="UTF-8"?>
<galleries>
<gallery base="Graphics/galleries/egypt/"
file="Egyptphotos.xml">
<sitename>Egypt</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
</gallery>
... duplicate China and Paris declarations
</gallery>
</galleries>
<?xml version="1.0" encoding="UTF-8"?>
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "1/10/2006">
<sitename>Egypt Gallery</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base
="../../gallery/galleries/egypt/thumbnails/" font = "Arial"
fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col =
"5"> </thumbnail>
<large base ="../../gallery/galleries/egypt/images/" font
= "Arial" fontsize = "3" color = "#F0F0F0" border = "0">
</large>
<photos id = "images">
<photo
path = "egypt_01.jpg"
width = "350"
height = "262"
thumbpath = "egypt_01.jpg"
thumbwidth = "75"
thumbheight = "56">
</photo>
</photos>
</gallery>Please delete this posting. I've found the full original
information in the v1.6 pre-release information and will compare to
that baseline. -
Need help making javascript thumbnail gallery function in javascript tab menu
Hello all,
I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work. It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab. In addition, once I click on the "gallery" tab the other tabs stop showing their content. I feel like I am missing something obvious. But I just can't figure out what. If anyone can help I would greatly appreciate it.
Thanks,
Natalie
Below is the code of my whole page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tour template</title>
<!--TABS-->
<link rel="stylesheet" type="text/css" href="MenuFader/style.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tour-button").css({
opacity: 0.3
$("#gallery-button").css({
opacity: 0.3
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the target div must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#contents").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
</script>
<!--End Tabs-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
#realtor panel {
width: 1000px;
body {
background-color: #282828;
margin: 0px;
.style4 {color: #A1A1A1}
-->
</style>
<!-- InstanceBeginEditable name="Gallery" -->
<title>Example tour page</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
<link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">
<!-- InstanceEndEditable -->
</head>
<!-- InstanceBeginEditable name="body" -->
<body>
<div id="realtor panel"><table width="100%" border="0">
<tr>
<td width="18%"> <div align="center"></div></td>
<td width="82%"> </td>
</tr>
</table>
</div>
<div id="page-wrap">
<div id="tour-button" class="button">
<img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
</div>
<div id="gallery-button" class="button">
<img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
</div>
<div id="info-button" class="button">
<img src="MenuFader/images/INFO.png" alt="info" class="button" />
</div>
<div id="specs-button" class="button">
<img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
</div>
<div class="clear"></div>
<div id="contents">
<div id="tour">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
<param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
<param name="quality" value="high" />
<embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
</object></noscript>
</div>
<div id="property gallery">
<div id="container">
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
<img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt sign.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt sign.jpg" alt="apt sign" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/entryway1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living1.jpg" alt="living1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living3.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining1.jpg" alt="dining1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Dining2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining2.jpg" alt="dining2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg" alt="kitchen1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed1.jpg" alt="bed1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom2.jpg">
<img src="Gallery/images/example/Tudor thumbs/bed2.jpg" alt="bed2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed3.jpg" alt="bed3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bathroom.jpg">
<img src="Gallery/images/example/Tudor thumbs/bath.jpg" alt="bath" />
</a>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="info">
<p class="style4">Content for info</p>
</div>
<div id="specs">
<p class="style4">This content is for specs.</p>
</div>
</div>
</div>
<!--script for gallery-->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '400px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
</script>
</body>
<!-- InstanceEndEditable -->
<!-- InstanceEnd --></html>Sure thing:
http://www.acresllc.net/TA501001.html -
Problem in responive photo gallery
I have inserted the yoxview photo gallery from this website http://www.yoxigen.com/yoxview/.Here is the code.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=""><!-- InstanceBegin template="/Templates/Vestrytemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Photo Gallery</title>
<script type="text/javascript" src="yoxview/yoxview-init.js">
</script>
<script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#thumbnails").yoxview({
backgroundColor: 'Blue',
playDelay: 5000
</script>
<link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">
<!-- InstanceEndEditable -->
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<link href="css/flexnav.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #E9E9E9;
</style>
<style>
footer
min-height: 80px;
background: #000;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #C7E003;
</style>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>-->
<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
</script>
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="IE-only.css" rel="stylesheet" type="text/css">
<![endif]-->
<script src="respond.min.js"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/LimeGreenheader-new-curved.png"/></div>
<div id="Nav">
<div class="menu-button">Navigation</div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="">Home</a>
<!-- <ul>
<li> <a href="#content">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a></li>
<li><a href="">Sub 1 Item 3</a></li>
<li><a href="">Sub 1 Item 4</a></li>
</ul> -->
</li>
<li><a href="">Profiles</a>
<ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a>
<ul>
<li><a href="">Sub 2 Item 1</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3</a></li>
</ul>
</li>
<li><a href="">Sub 1 Item 3</a>
<ul>
<li><a href="">Sub 2 Item 1</a></li>
<li><a href="">Sub 2 Item 2</a>
<ul>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 2</a></li>
<li><a href="">Sub 3 Item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Photo Gallery</a>
<!-- <ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a></li>
<li><a href="">Sub 1 Item 3</a></li>
</ul> -->
</li>
<li><a href="">Alumni</a>
<!-- <ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a></li>
<li><a href="">Sub 1 Item 3</a></li>
</ul> -->
</li>
<li><a href="">Contact Us</a>
<!-- <ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a></li>
<li><a href="">Sub 1 Item 3</a></li>
</ul> -->
</li>
</ul>
</nav>
</div> <!-- End div id="Nav" -->
<div id="LayoutDiv2">
<!-- InstanceBeginEditable name="Vestry-Content" -->
<!-- <script>
if (Galleria) { $("body").text('Galleria works') }
</script>-->
<div class="yoxview">
<h3> Photo Gallery</h3>
<a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
<a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
<a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
<!--<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">-->
</div>
<!--<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>-->
<!-- InstanceEndEditable -->
</div>
<!--
<div id="footer">This is the content for Layout Div Tag "footer"</div> -->
</div>
<footer></footer>
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
<script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>
</body>
<!-- InstanceEnd --></html>
The plug-in works.But i want to increase the height of the div with the class = yoxview.But i couldn't find the such class.Here is the css.
/* YoxView v2.0 CSS file */
#yoxview .yoxview_bottom{ bottom: 0; }
#yoxview .yoxview_right{ float: right; }
#yoxview .yoxview_left{ float: left; }
#yoxview_popupWrap
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 100;
#yoxview
position: absolute;
font-family: Arial, Sans-Serif;
z-index: 999;
border: solid 1px #999;
overflow: hidden;
font-size: 10pt;
text-align: left;
max-height: 1000px;
#yoxview a img, #yoxview_infoPanel a img{ border: none; }
#yoxview a:focus{ outline: none; }
#yoxview div.yoxview_imgPanel{ position: absolute; top: 0; left: 0; }
#yoxview div.yoxview_mediaPanel
position: absolute;
background: #191919;
width: 100%;
height: 100%
#yoxview .yoxview_ctlBtn
position: absolute;
z-index: 3;
display: block;
text-decoration: none;
outline: none;
width: 50%;
height: 100%;
#yoxview .yoxview_ctlBtn img
position: absolute;
border: none;
top: 50%;
margin-top: -22px;
#yoxview a.yoxview_ctlBtn:focus, #yoxview a.yoxview_ctlBtn:active{ outline: none; outline: none;}
#yoxview .yoxview_notification
width: 59px;
height: 59px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
z-index: 4;
opacity: 0.6;
filter: alpha(opacity=60);
background-image: url(images/sprites.png);
background-repeat: no-repeat;
display: none;
#yoxview #yoxview_ajaxLoader img
padding: 13px;
#yoxview .yoxview_popupBarPanel
position: absolute;
z-index: 4;
min-height: 70px;
width: 100%;
right: 0;
#yoxview #yoxview_menuPanel
width: 145px;
height: 42px;
padding-top: 0px;
padding-right: 9px;
position: absolute;
right: 0;
background: url(images/sprites.png) no-repeat left -77px;
background: rgba(0, 0, 0, 0.8);
-moz-border-radius: 0 0 0 15px;
-webkit-border-radius: 0 0 0 15px;
border-radius: 0 0 0 15px;
top: -42px;
#yoxview #yoxview_menuPanel a
display: block;
width: 45px;
float: right;
text-align: center;
font-size: 0.8em;
position: relative;
margin-top: -5px;
padding-bottom: 13px;
text-decoration: none;
font-family: Arial, Sans-Serif;
#yoxview #yoxview_menuPanel a span{ color: White; display: block; margin-bottom: 3px; }
#yoxview #yoxview_menuPanel a.last{ margin-left: 0; }
#yoxview #yoxview_menuPanel a:focus{ outline: none; }
#yoxview_infoPanel
position: absolute;
bottom: 0;
width: 100%;
height: 0;
color: White;
z-index: 2;
overflow: hidden;
#yoxview_infoPanel #yoxview_infoPanelBack
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 0;
#yoxview_infoPanel #yoxview_infoPanelContent
position: absolute;
width: 100%;
z-index: 2;
top: 0;
left: 0;
#yoxview_infoPanel span#yoxview_count
display: block;
width: 55px;
font-size: 0.8em;
float: left;
text-align: center;
padding-top: 8px;
color: #bbb;
#yoxview_infoPanel #yoxview_infoText
margin: 0 55px;
font-size: 12pt;
padding: 5px 0;
#yoxview_infoPanel #yoxview_infoText #yoxview_infoTextDescription
margin-top: 1em;
font-size: 10pt;
padding-bottom: 0.5em;
max-height: 200px;
overflow: auto;
padding-right: 10px;
#yoxview_infoPanel #yoxview_infoText a, #yoxview .yoxview_error a{ color: #a7d557; text-decoration: none; outline: none; }
#yoxview_infoPanel #yoxview_infoText a:hover, #yoxview .yoxview_error a:hover{ color: #d5eeaa }
#yoxview_infoPanel a.yoxviewInfoLink
display: none;
opacity: 0.8;
float: right;
margin-right: 5px;
margin-top: 5px;
#yoxview_infoPanel a.yoxviewInfoLink:hover{ opacity: 1 }
#yoxview #yoxview_helpPanel
display: none;
width: 201px;
height: 312px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -171px;
margin-left: -111px;
z-index: 5;
color: White;
padding: 20px;
padding-top: 10px;
cursor: pointer;
#yoxview #yoxview_helpPanel h1{ font-family: Arial Black, Arial, Sans-Serif; font-size: 1em; }
#yoxview #yoxview_helpPanel p{ margin-top: 80px; }
#yoxview #yoxview_helpPanel span#yoxview_closeHelp{ display: block; position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; }
#yoxview .yoxview_error
display: block;
text-align: center;
color: White;
font-family: Arial, Sans-Serif;
font-size: 14pt;
top: 41%;
width: 100%;
height: 20%;
position: absolute;
padding: 10px;
#yoxview .yoxview_error .errorUrl{ font-size: 10pt; }
#yoxview .yoxview_top{ top: 0; width: 50%; }
#yoxview .yoxview_element{ width: 100%; height: 100%; position: absolute; border: none; background: #333; }
.yoxview-thumbnails a
float: left;
margin: 4px;
/* For thumbnails opacity: */
opacity: 0.8;
filter: alpha(opacity=80);
.yoxview-thumbnails a:hover
/* For thumbnails opacity: */
opacity: 1;
filter: alpha(opacity=100);
.yoxview-thumbnails a img
/* Set white borders around the thumbnails, instead of the browser's default Blue: */
border: solid 1px #ffffff;
.yoxview-thumbnails-details{ margin-bottom: 1em; }
.yoxview-thumbnails-details h2{ margin-bottom: 0; padding: 0; font-size: 1.2em; font-weight: bold;}
Where i could increase the height of the div?Pls help me.http://www.yoxigen.com/yoxview/usage.aspx#installation
Please visit this link.Here in the first step,they have said to add class=yoxview.I did the same.But i couldn't find it in CSS.I have added these links.
<script type="text/javascript" src="yoxview/yoxview-init.js">
</script>
<script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#thumbnails").yoxview({
backgroundColor: 'Blue',
playDelay: 5000
</script>
<link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">
HTML Markup
<div class="yoxview">
<h3> Photo Gallery</h3>
<a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
<a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
<a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
Please help. -
Change background in Adobe Bridge Web Gallery
Hi,
I am trying to use a web gallery created with adobe bridge in my webpage. I have inserted gallery in an <iframe>. The gallery shows up just fine. I would like to have the background of the webpage show up rather than the background of the web gallery. How can I do this? Also, I would like to change the appearance of the captions under the pictures. Also the gallery shifts left in interbet explorer. Can this be fixed?
Here is the code in my web Page:
<!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"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Home Page</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<link href="cliff.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#Webgallery {
height: 750px;
width: 1000px;
text-align: center;
background-image:url(back1.gif)
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
<!-- end .header --></div>
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" --> <img src="Pictures/back1.jpg" width="72" height="72" />
<p style="font-size:larger; font-family:'Comic Sans MS', cursive"> Cliff is an all breed AKC Registered Professional Dog Handler</p>
<p><img src="Pictures/back1.jpg" width="72" height="72" /></p>
<p><img src="Pictures/back1.jpg" width="72" height="72" /></p>
<!-- InstanceEndEditable -->
<!-- end .sidebar --></div>
<div class="content">
<div > <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="cliffsteele.html">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Resort</a>
<ul>
<li><a href="facilities.html">Our Facility</a></li>
<li><a href="Kennel.html">Boarding & Daycare</a></li>
<li><a href="spa.html">Grooming</a></li>
<li><a href="#">Rates</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Show Handling</a>
<ul>
<li><a href="#">Info</a></li>
<li><a href="#">Rates</a></li>
<li><a href="calendar.html">Schedule</a></li>
</ul>
</li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Me</a></li>
<li><a href="Contact.html">Contact Me</a></li>
</ul></div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Clifford W. Steele</h1>
<!-- InstanceEndEditable -->
<div ><!-- InstanceBeginEditable name="content" -->
<div id="Webgallery"><iframe src="Adobe Web Gallery/index.html" width="1000" height="750" frameborder="0" name="gallery"></iframe></div>
<!-- InstanceEndEditable --></div>
<!-- end .content --></div>
<div class="footer">
<div style="float:right">
<p> <a href="MAILTO:[email protected]" >Site Designed by Fredric M. Zipser</a><br />
</p>
</div>
<div class="clearfloatleft">
<p>Clifford W. Steele Professional Handler <br />
1395 Rt. 6<br />
Carmel, NY 10512-1627<br />
United States<br />
ph:(845) 225-2463<br />
Cell:(845) 661-0010<br />
<a href="MAILTO:[email protected]" >[email protected]</a></p>
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd -->
=====================================================================
Here is the gallery code:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="KEYWORDS" content="photography,software,photos,digital darkroom,gallery,image,photographer" />
<meta name="generator" content="Adobe Lightroom" />
<title>Adobe Web Gallery</title>
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="content/139026903252918767_custom.css" />
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="resources/css/master.css" />
<script type="text/javascript">
window.AgMode = "publish";
cellRolloverColor="#a1a1a1";
cellColor="#949494";
</script>
<script type="text/javascript" src="resources/js/liveUpdate.js">
<!--padding for ie-->
</script>
<script type="text/javascript" src="resources/js/cutName.js">
<!--padding for ie-->
</script>
<!--[if lt IE 7.]> <script defer type="text/javascript" src="resources/js/pngfix.js"></script> <![endif]-->
<!--[if gt IE 6]> <link rel="stylesheet" href="resources/css/ie7.css"></link> <![endif]-->
<!--[if lt IE 7.]> <link rel="stylesheet" href="resources/css/ie6.css"></link> <![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sitetitle">
<h1 onClick="clickTarget( this, 'siteTitle.text' );" id="liveUpdateSiteTitle">Adobe Web Gallery</h1>
</div>
<div id="collectionHeader">
<h1 onClick="clickTarget( this, 'groupTitle.text' );" id="liveUpdateCollectionTitle">My Photographs</h1>
<p onClick="clickTarget( this, 'groupDescription.text' );" id="liveUpdateCollectionDescription">Web Photo Gallery created by Adobe Bridge</p>
</div>
<div id="stage">
<div id="index">
<div id="tempDiv" xmlns="">Floyd & Merve<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_7522730020_large.html'">
<div class="itemNumber">1</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID0_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7522730020_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7522730020.jpg" id="ID0_1390269032529_thumb" alt="Floyd & Merve" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Honey & Coco<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_5915412028_large.html'">
<div class="itemNumber">2</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID1_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_5915412028_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_5915412028.jpg" id="ID1_1390269032529_thumb" alt="Honey & Coco" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Hope<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_2409862627_large.html'">
<div class="itemNumber">3</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID2_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_2409862627_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_2409862627.jpg" id="ID2_1390269032529_thumb" alt="Hope" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Jackson<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_0603615958_large.html'">
<div class="itemNumber">4</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID3_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0603615958_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0603615958.jpg" id="ID3_1390269032529_thumb" alt="Jackson" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div class="clear">
<!--padding for ie-->
</div>
<div id="tempDiv" xmlns="">Larry<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_6717880965_large.html'">
<div class="itemNumber">5</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID4_1390269032529_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_6717880965_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_6717880965.jpg" id="ID4_1390269032529_thumb" alt="Larry" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Maggie & Fiona<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_7881538797_large.html'">
<div class="itemNumber">6</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID5_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7881538797_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7881538797.jpg" id="ID5_1390269032545_thumb" alt="Maggie & Fiona" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Mocho<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_0937208439_large.html'">
<div class="itemNumber">7</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID6_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0937208439_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0937208439.jpg" id="ID6_1390269032545_thumb" alt="Mocho" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Riley<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_9205901081_large.html'">
<div class="itemNumber">8</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID7_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_9205901081_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_9205901081.jpg" id="ID7_1390269032545_thumb" alt="Riley" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div class="clear">
<!--padding for ie-->
</div>
<div id="tempDiv" xmlns="">Rio<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_4843308047_large.html'">
<div class="itemNumber">9</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID8_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_4843308047_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_4843308047.jpg" id="ID8_1390269032545_thumb" alt="Rio" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Scout & Whisky<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_7104248265_large.html'">
<div class="itemNumber">10</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID9_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_7104248265_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_7104248265.jpg" id="ID9_1390269032545_thumb" alt="Scout & Whisky" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Shadow<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft " onClick="window.location.href='content/_0430682464_large.html'">
<div class="itemNumber">11</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID10_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_0430682464_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_0430682464.jpg" id="ID10_1390269032545_thumb" alt="Shadow" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div id="tempDiv" xmlns="">Sissy<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderRight " onClick="window.location.href='content/_8169451030_large.html'">
<div class="itemNumber">12</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID11_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_8169451030_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_8169451030.jpg" id="ID11_1390269032545_thumb" alt="Sissy" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div class="clear">
<!--padding for ie-->
</div>
<div id="tempDiv" xmlns="">Tyke<!--padding for OS X 10.6-->
</div>
<script type="text/javascript">
var nameDiv = document.getElementById("tempDiv");
var thumbnailName = getName(nameDiv.innerHTML);
try {
nameDiv.parentNode.removeChild(nameDiv);
} catch (e) {}
</script>
<div class="thumbnail borderTopLeft borderBottom " onClick="window.location.href='content/_3042148269_large.html'">
<div class="itemNumber">13</div>
<div onMouseOver="window.gridOn( this.parentNode, 'ID12_1390269032545_thumb' );" onMouseOut="window.gridOff( this.parentNode );" class="alignmentOuterGrid">
<div class="alignmentOuter">
<div class="alignmentMiddle">
<div class="alignmentInner">
<div class="AdjustZIndex">
<a href="content/_3042148269_large.html" onClick="return needThumbImgLink;">
<img src="content/bin/images/thumb/_3042148269.jpg" id="ID12_1390269032545_thumb" alt="Tyke" />
</a>
</div>
</div>
</div>
</div>
<div class="thumbnailName">
<p onClick="clickTarget( this, 'thumbnailname' );" id="thumbnailName">
<script type="text/javascript">
document.write(thumbnailName);
</script>
</p>
</div>
</div>
</div>
<div class="emptyThumbnail borderTopLeft borderBottom"> </div>
<div class="emptyThumbnail borderTopLeft borderBottom"> </div>
<div class="emptyThumbnail borderTopLeft borderRight borderBottom"> </div>
<div class="clear">
<!--padding for ie-->
</div>
</div>
</div>
<div class="clear">
<!--padding for ie-->
</div>
<div id="contact">
<a href="mailto:[email protected]">
<span onClick="clickTarget( this, 'contactInfo.text' );" id="liveUpdateContactInfo">Contact name</span></a>
</div>
<div class="clear">
<!--padding for ie-->
</div>
</div>
</body>
</html>Try opening in Chrome or Firefox and inspecting the elements. You can turn easily locate the CSS that's driving the background and experiment with settings. You get there by right clicking on an element and select Inspect Element from the options. It's much easier than trying to go through all of that HTML code without a style sheet to go along with it.
-
Dreamweaver CS4 Lightbox Gallery Problem
Hello Everyone,
I am using Dreamweaver CS4 on a Mac and I am a beginner at producing my website, just so you know. I am using lightbox gallery for my photo gallery on my website and everything works fine except that when you click on the picture to start the gallery there is a question mark that pops up where there should be instead the enlarged picture. When I preview it using Safari the enlarged photo pops up with no problem, the question mark pops up only when I upload the website online. I have been trouble shooting to the best of my ability, but to no avail. Please someone, show me what I am doing wrong.
Here is the coding:
<!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>Photo Gallery</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="gallery1" class="lbGallery">
<ul>
<li> <a href="images/lightboxdemo1.jpg" title=""> <img src="images/lightboxdemo_thumb1.JPG" width="72" height="72" alt="" /> </a> </li>
<li> <a href="images/lightboxdemo2.jpg" title=""> <img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="" /> </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">
// BeginWebWidget lightbox_gallery
$(function() {
$('#gallery1 a').lightBox();
// EndWebWidget lightbox_gallery
</script>
</body>
</html>
And the website URL is: http://majesticmonumentvalley.com/photogallery.html
Please note that I have not customized my own photos in the gallery because they only end up with the question mark so I wanted to fix this problem before I started putting my own photos on the website.
Thank you for your time.
-JessicaHello,
Thank you for your response. I put my own photos into the gallery and made sure they were located in the images folder. I previewed it in Safari and all was well. But, yet again, when I uploaded it online it does the same thing- a question mark appears instead of the enlarged image. The thumbnail images are fine, it is just the enlarged images giving me grief. What am I doing wrong?
The new coding:
<!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>Photo Gallery</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="gallery1" class="lbGallery">
<ul>
<li> <a href="images/honeymoonarch1.jpg" title=""> <img src="images/honeymoonarch_thumbnail.jpg" width="200" height="133" alt="" /> </a> </li>
<li> <a href="images/jessicaofmv.jpg" title=""> <img src="images/jessicaofmv_thumbnail.jpg" width="150" height="226" alt="" /> </a> </li>
<li> <a href="images/mittensunriseglow.JPG" title=""> <img src="images/mittensunriseglow_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
<li> <a href="images/themittens.JPG" title=""> <img src="images/themittens_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
<li></li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget lightbox_gallery
$(function() {
$('#gallery1 a').lightBox();
// EndWebWidget lightbox_gallery
</script>
</body>
</html>
And the URL: http://majesticmonumentvalley.com/photogallery.html
Thanks again for your time.
-Jessica -
Can't get photo gallery slide show to work
Hello,
If anyone could help, I'd appreciate it. This is for a
non-profit I work for. After getting the gallery to work, I can't
get the slide show to work.
from my gallery.html:
<title>Photo Gallery</title>
<link href="../css/screen.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript"
src="includes/SpryEffects.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet ("photos.xml",
"gallery/photos/photo");
var dsData = new
Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<script src="gallery.js" type="text/javascript">
</script>
<script src="SpryMenuBar.js" type="text/javascript">
</script>
<style type="text/css">
#main (I'm not incl. details for these - to save space)
#thumbContainer
#controls
#header
</style>
</head>
<script type="text/javascript">
</script>
</head>
<body>
<div id="header" spry:region="dsData">
<p>{sitename}<br />
</div>
<div id="thumbContainer" spry:region="dsGallery">
<img src="thumbnails/{@thumbpath}"
spry:repeat="dsGallery" class="thumbs"
spry:setrow="dsGallery"/> </div>
<div id="main" spry:detailregion="dsGallery">
<img src="images/{@path}" class="images"/>
</div>
<div id="controls">
<ul id="transport">
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage(true);"
title="Previous">Previous</a></li>
<li class="pausebtn"><a href="#" onclick="if
(gSlideShowOn) StopSlideShow(); else StartSlideShow();"
title="Play/Pause" id="playLabel">Play</a></li>
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage();" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbContainer" spry:region="dsPhotos
dsGallery">
<p class="ClearAll"></p>
</div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Here's the gallery.js file: (didn't include the global vars -
to save space)
dsGallery.addObserver(function(nType, notifier, data) {
if (nType == "onPreLoad")
StopSlideShow();
Spry.Data.Region.addObserver("thumbContainer",
function(nType, notifier, data) {
if (nType == "onPostUpdate")
ShowCurrentImage();
if (gAutoStartSlideShow)
StartSlideShow(true);
function SetMainImage(imgPath, width, height, tnID)
var img = document.getElementById("mainImage");
if (!img)
return;
CancelBehavior("mainImage");
Spry.Utils.SelectionManager.clearSelection("thumbnailSelection");
if (tnID)
Spry.Utils.SelectionManager.select("thumbnailSelection",
document.getElementById(tnID), "selectedThumbnail");
if (gImageLoader)
gImageLoader.onload = function() {};
gImageLoader = null;
gBehaviorsArray["mainImage"] = new Spry.Effect.Opacity(img,
Spry.Effect.getOpacity(img), 0, { duration: 400,
finish: function()
gBehaviorsArray["mainImage"] = new
Spry.Effect.Size(img.parentNode,
Spry.Effect.getDimensions(img.parentNode), { width: width, height:
height, units:"px"}, {duration: 400,
finish: function()
gImageLoader = new Image();
gImageLoader.onload = function()
img.src = gImageLoader.src;
gImageLoader = null;
gBehaviorsArray["mainImage"] = new Spry.Effect.Opacity(img,
0, 1, { duration: 400,
finish: function()
gBehaviorsArray["mainImage"] = null;
if (gSlideShowOn)
SetSlideShowTimer();
gBehaviorsArray["mainImage"].start();
gImageLoader.src = imgPath;
gBehaviorsArray["mainImage"].start();
gBehaviorsArray["mainImage"].start();
function CancelBehavior(id)
if (gBehaviorsArray[id])
gBehaviorsArray[id].cancel();
gBehaviorsArray[id] = null;
function SizeAndPosition(id, toX, toY, toWidth, toHeight,
callback)
CancelBehavior(id);
var effectCluster = new Spry.Effect.Cluster( { finish:
callback } );
var ele = Spry.Effect.getElement(id);
var moveEffect = new Spry.Effect.Move(ele,
Spry.Effect.getPosition(ele), { x: toX, y: toY, units: "px" }, {
duration: 400 });
var sizeEffect = new Spry.Effect.Size(ele,
Spry.Effect.getDimensions(ele), { width: toWidth, height: toHeight,
units: "px" }, { duration: 400 });
effectCluster.addParallelEffect(moveEffect);
effectCluster.addParallelEffect(sizeEffect);
gBehaviorsArray[id] = effectCluster;
gBehaviorsArray[id].start();
function GrowThumbnail(img, width, height)
Spry.Utils.addClassName(img, "inFocus");
img.style.zIndex = 150;
var id = img.getAttribute("id");
var twidth = Math.floor(width * .75);
var theight = Math.floor(height * .75);
var tx = (gThumbWidth - twidth) / 2;
var ty = (gThumbHeight - theight) / 2;
SizeAndPosition(id, tx, ty, twidth, theight,
function(b){gBehaviorsArray[id] = null;});
function ShrinkThumbnail(img)
Spry.Utils.addClassName(img, "inFocus");
img.style.zIndex = 1;
var id = img.getAttribute("id");
SizeAndPosition(id, 0, 0, gThumbWidth, gThumbHeight,
function(b){gBehaviorsArray[id] = null;
Spry.Utils.removeClassName(img, "inFocus");});
function ShowCurrentImage()
var curRow = dsGallery.getCurrentRow();
SetMainImage(dsGallery.getCurrentRow()["@base"] + "images/"
+ curRow["@path"], curRow["@width"], curRow["@height"], "tn" +
curRow["ds_RowID"]);
function AdvanceToNextImage(moveBackwards)
var rows = dsGallery.getData();
var curRow = dsGallery.getCurrentRow();
if (rows.length < 1)
return;
for (var i = 0; i < rows.length; i++)
if (rows
== curRow)
if (moveBackwards)
--i;
else
++i;
break;
curRow = rows;
dsGallery.setCurrentRow(curRow["ds_RowID"]);
ShowCurrentImage();
function SetSlideShowTimer()
function KillSlideShowTimer()
function StartSlideShow(skipTimer)
gSlideShowOn = true;
if (!skipTimer)
SetSlideShowTimer();
var playLabel = document.getElementById("playLabel");
if (playLabel)
playLabel.firstChild.data = "Pause";
function StopSlideShow()
gSlideShowOn = false;
KillSlideShowTimer();
var playLabel = document.getElementById("playLabel");
if (playLabel)
playLabel.firstChild.data = "Play";
function HandleThumbnailClick(id)
StopSlideShow();
dsGallery.setCurrentRow(id);
ShowCurrentImage();
Thank you.Hi,
I will gladly help you with your problem but please give me a
link to your gallery wither as a private message or by email
([email protected]). The files here pasted are incorrect, look to
the SetSlideShowTimer() or the StartSlideShow() functions above
that are incomplete. Not mentioning that the CSS are really make
the difference.
It will take me more time to try to reconstruct your
structure, not having all the files you reference and probably not
being able to duplicate your problem because the deployment
failure.
Cristian
Maybe you are looking for
-
Crystal Reports Server XI error in Infoview
We have an old Windows 2000 server that was running Crystal Reports Server XI (not R2) and we recently reinstalled it on a Windows 2003 server and imported all the reports. All scheduled reports work find however in Infoview if we click View Latest
-
Monitor is very dark but not black
The monitor seemed to have gone dead a while back. I reset the PMU, and now I can very vaguely see the desktop, but it's way too dark to use. Is it the backlight that's gone out? Or is there some way to adjust brightness levels (without seeing the sc
-
File2file Receiver Determination Problem
Hi All, I am doing File2file my IR part is activated in ID part I creater 2 CC in Business Service sender with FCC and Receiver with Normal XMLfile after this step Iam trying to create my Receiver Determination Its showing that NO OBJECTS FO
-
Why duplicates from Save As?!!
What's happened to the Save As command - one of those I use(d) most often. Why do I get Duplicate instead? That's nuts! How can I reinstate SaveAs across the board. (Thankfully Microsoft kept it in Office)
-
Desktop Manager 4.5 crshing on Vista Business
Hello All, i have the desktop manager installed on vista. The version is 4.5.015 for my blackberry. I have vista business installed with SP 1. When i do a synchronise, it crashes when it tries to replicate the calendar on my BB. I have a 8310 curve.