Image Gallery - Paginate detail image
I've been looking all over (including the interakt forums) and can't find an answer.
I've built an image gallery. Everything works just fine. However, after clicking a thumbnail to view the larger image, I would like to be able to navigate through the larger images with next and back buttons.
How can I do this?
I've been looking all over (including the interakt forums) and can't find an answer.
I've built an image gallery. Everything works just fine. However, after clicking a thumbnail to view the larger image, I would like to be able to navigate through the larger images with next and back buttons.
How can I do this?
Similar Messages
-
Photo Gallery - Load Detail Image
How can I load a different image other than the first one
listed in the XML file?
Example, let's say I have 20 photos in my XML file. The first
detail image (large) to load is the first one in the list, how can
I show the 15th one in the list when the page loads? The order of
the thumbnails must be in the order they appear in the XML file.
Hopefully that makes sense. Thanks.When you look at most galleries around you will notice they all keep the same aspect ratio for uniformaty. That is one thing and something you can set in the gallery module paramaters.
In terms of positioning etc it is a simple matter of CSS and what you do in that CSS is what ever you like.
Target the elements and apply CSS to them to style them.
Very easy -
Dynamic image gallery on detail page
I have a master page listing 8 products. I have inserted a dynamic image gallery on the detail page which looks ok, but has one major flaw: when you click on a thumbnail the main image opens on the wrong page. e.g. if you click on page ../dragons.php?id=3 the main image opens on ../dragons.php/id=1 and shows the following url: .../dragons.php?image=btf.jpg (or whatever the image file name).
I have only just started using php and I would appreciate some guidance on how to resolve this problem.
The relevant sections of the code are as follows?
$vardragon_dragons_species = "1";
if (isset($_GET['id'])) {
$vardragon_dragons_species = $_GET['id'];
mysql_select_db($database_cjwebsite, $cjwebsite);
$query_dragons_species = sprintf("SELECT dragons.Order, dragons.family, dragons.Latin, dragons.English, dragons.Img1, dragons.Img2, dragons.Img3, dragons.img4, dragons.Img5, dragons.text, `dragons gallery`.filename, `dragons gallery`.caption, dragons.id, `dragons gallery`.image_id, dragons.id FROM dragons, `dragons gallery` WHERE dragons.id = `dragons gallery`.image_id AND dragons.id=%s", GetSQLValueString($vardragon_dragons_species, "int"));
$dragons_species = mysql_query($query_dragons_species, $cjwebsite) or die(mysql_error());
$row_dragons_species = mysql_fetch_assoc($dragons_species);
$totalRows_dragons_species = mysql_num_rows($dragons_species);
if (isset($_GET['image'])) {
$mainImage = $_GET['image'];
else {
$mainImage = $row_dragons_species['filename']; }
<body>
<div class="main_image"><img src="../images/dragons/<?php echo $mainImage; ?>" alt="<?php echo $row_dragons_species['caption']; ?>" />
<div class="capt"><?php echo $row_dragons_species['caption']; ?></div>
<ul class="gallery">
<?php do {
if ($row_dragons_species['filename'] == $mainImage) {
$row_dragons_species['caption'];
}?>
<li><a href="<?php echo $_SERVER['PHP_SELF'];?>?image=<?php echo $row_dragons_species['filename']; ?>"><img src="../images/dragons/thumbs/<?php echo $row_dragons_species['filename']; ?>" alt="<?php echo $row_dragons_species['caption']; ?>" /></a></li>
<?php } while ($row_dragons_species = mysql_fetch_assoc($dragons_species)); ?>
</ul>
Many thanks
CJI'm still at an early stage in building this site and because it is allvery experimental I am and just using local testing.
So to try to explain my objective. I have a master page with 8 products there is a link to a detail page based on product id. So from the master page (dragons.php) you can select a product which will show the product information on a detail page (eg. dragons_species.php?id=1 or dragons_species.php?id=2 etc). This works ok.
Each detail page has various pieces of information and 5 images. I wanted to show the images in an image gallery format and so used the code you provide in your book PHP Solutions (Creating a Dynamic Online Gallery pp.323-330). This works ok on the first page where id=1, but on subsequent pages (id=2, id=3 etc) I am loosing the id link infavour of an image based link.
This is the complete script for my detail page (dragons_species.php)
<?php require_once('../Connections/cjwebsite.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
return $theValue;
$vardragon_dragons_species = "1";
if (isset($_GET['id'])) {
$vardragon_dragons_species = $_GET['id'];
mysql_select_db($database_cjwebsite, $cjwebsite);
$query_dragons_species = sprintf("SELECT dragons.Order, dragons.family, dragons.Latin, dragons.English, dragons.Img1, dragons.Img2, dragons.Img3, dragons.img4, dragons.Img5, dragons.text, `dragons gallery`.filename, `dragons gallery`.caption, dragons.id, `dragons gallery`.image_id, dragons.id FROM dragons, `dragons gallery` WHERE dragons.id = `dragons gallery`.image_id AND dragons.id=%s", GetSQLValueString($vardragon_dragons_species, "int"));
$dragons_species = mysql_query($query_dragons_species, $cjwebsite) or die(mysql_error());
$row_dragons_species = mysql_fetch_assoc($dragons_species);
$totalRows_dragons_species = mysql_num_rows($dragons_species);
if (isset($_GET['image'])) {
$mainImage = $_GET['image'];
else {
$mainImage = $row_dragons_species['filename']; }
?>
<!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>Odonata Species</title>
<link href="../Css/dragons.css" rel="stylesheet" type="text/css" />
<link href="../Css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<?php include('../Includes/logo2.inc.php'); ?>
</div>
<div id="content"> <div id="title">
<h1>Damselflies & Dragonflies</h1>
</div>
<div class="family")><?php echo $row_dragons_species['Order']; ?></div>
<div class="subfamily">
<?php echo $row_dragons_species['family']; ?>
<div class="main_image"><img src="../images/dragons/<?php echo $mainImage; ?>" alt="<?php echo $row_dragons_species['caption']; ?>" />
<div class="capt"><?php echo $row_dragons_species['caption']; ?></div></div></
<div class="description">
<div class="text" id="name"><?php echo $row_dragons_species['Latin']; ?></div>
<div id="vernname"><?php echo $row_dragons_species['English']; ?></div>
<?php echo $row_dragons_species['text']; ?></div>
<ul class="gallery">
<?php do {
if ($row_dragons_species['filename'] == $mainImage) {
$row_dragons_species['caption'];
}?>
<li><a href="<?php echo $_SERVER['PHP_SELF'];?>?image=<?php echo $row_dragons_species['filename']; ?>"><img src="../images/dragons/thumbs/<?php echo $row_dragons_species['filename']; ?>" alt="<?php echo $row_dragons_species['caption']; ?>" /></a></li>
<?php } while ($row_dragons_species = mysql_fetch_assoc($dragons_species)); ?>
</ul>
<div id="footer">
<?php include('../includes/footer.inc.php'); ?>
</div></div>
</div>
</body>
</html>
<?php
mysql_free_result($dragons_species);
?>
The code for my master page dragons.php is as follows
<?php require_once('../Connections/cjwebsite.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
return $theValue;
mysql_select_db($database_cjwebsite, $cjwebsite);
$query_dragons_species = "SELECT id, Latin, English, Thumbs FROM dragons";
$dragons_species = mysql_query($query_dragons_species, $cjwebsite) or die(mysql_error());
$row_dragons_species = mysql_fetch_assoc($dragons_species);
$totalRows_dragons_species = mysql_num_rows($dragons_species);mysql_select_db($database_cjwebsite, $cjwebsite);
?>
<!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>Odonata</title>
<link href="../Css/menu.css" rel="stylesheet" type="text/css" />
<link href="../Css/dragons.css" rel="stylesheet" type="text/css" />
<body>
<div id="header">
<?php include('../Includes/logo2.inc.php'); ?></div>
<div id="content"> <div id="title">
<h1>Damselflies</a> & Dragonflies</h1>
<div id="sidebar">
<?php include('../Includes/menu2.inc.php'); ?>
<div id="text">
<h2>ODONATA</h2>
</h2>
<p>Ten species have been recorded on the islands, of which seven are common and widely distributed. The Golden-ringed Dragonfly and the Emerald Damselfly are both very scarce, whilst the record of the Azure-winged Dragonfly on Lewis is unconfirmed.
<?php do { ?>
<div class="speciesbox"><a href="Dragons_species.php?id=<?php echo $row_dragons_species['id']; ?>"><img src="../images/dragons/thumbs/<?php echo $row_dragons_species['Thumbs']; ?>" /></a>
<div class="latin"><a href="Dragons_species.php?id=<?php echo $row_dragons_species['id']; ?>"><?php echo $row_dragons_species['Latin']; ?></a>
<div class="english"><a href="Dragons_species.php?id=<?php echo $row_dragons_species['id']; ?>"><?php echo $row_dragons_species['English']; ?></a> </div>
</div></div>
<?php } while ($row_dragons_species = mysql_fetch_assoc($dragons_species)); ?> </div>
<div id="footer">
<?php include('../includes/footer.inc.php'); ?>
</div>
</body>
</html>
<?php
mysql_free_result($dragons_species);
?>
Does this shed any light?
Many thanks
CJ. -
Hey all. I'm developing a site for a real estate agency. I have built a web app that lists and displays individual properties. I have managed to hook up Business Catalyst's Photo gallery module that displays a specific gallery (one for each property) on the details page template. I did this by creating a text sting field in the web app, into which you can input the gallery tag specific for each property. Like this: ({module_photogallery,33715, 4,,6,175,150,ThumbnailAlgorithm,fill_proportional}). This works, but the client now says they don't like the "lightbox" function of the default BC gallery module, and want it to function differently. As in having clickable thumbnails that populate a static image area. Is this possible? I understand that I could use different image galleries, if it were a gallery on a static page. My problem is that I need a gallery that can be different for each web app item and work within the details page of a web app. Any help would be appreciated.
Here is the test link: Anne Rogers Realty Group, Inc - Committed to our clients, our neighborhood, with personalized service every time. note the way the list and details pages function.
ThanksYes,
What you are seeing by default is shown as 'My folders' view. It's a flat alphabetical list of the last level subfolders in which you have media files.
Click on the little yellow icon just right of the 'My folders' title bar, and you switch to the 'Folders' view which reflects what you see in your explorer. The difference is that by default, you see only subfolders having image files; if you want to display subfolders without image files, right click on the master folder and choose to show empty folders; that choice is not sticky. -
Div content, inline images, contain scroll methods
MacPro, DW CS6
Swap Image function
Using inline image row, responsive divs, as secondary navigation (Back-Home-Next text navigation in div above) for swap image pages. I would like to contain the div to the div container width, but avoid the stacking on down size to notePad, then mobile. Do not want to use scrollbars, but would like to emulate slideshow type of function, to allow nav images to move left or right as needed by viewer, with remainder hidden until appearance is needed.
Although I could use PowerPoint, Bridge or easyRotator, I would prefer to use pages as I've coded as I intend to use throughout site for art presentations.
View on server at: http://www.satgraphics.com/SR-71/pages/gallery1_pg1.htm
Thanks in advance,
Joe Satterwhite
SatGraphics.com
ScreamingEagles.comI require different (text) information in its own div to display with each image, and have created a different page for each, to enable navigation through entire series sequentially.
IMO, that's a very clumsy approach to gallery presentation. You could just as easily create one page for each gallery using jQuery and Fancybox with inline content. To illustrate my point, copy & paste this code into a new, blank document. Save & preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 with Divisions</title>
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles thumbnail container**/
#thumbs p {
float: left;
width: 180px;
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid silver;
/**optional rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**use same size thumbnail images throughout**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: "";
clear: left;
display: block;
/**content**/
#detail-01, #detail-02, #detail-03 {
display:none;
img {max-width:100%; margin:0 auto; display:block}
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2 Gallery</a> with images & divs</h1>
<h2>Details are hidden until thumbnails are clicked.</h2>
<!--insert thumbnails with links to details below-->
<div id="thumbs">
<!--thumbnail 01-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-01"><img src="http://placehold.it/160x120&text=THUMBNAIL 01" alt="Thumbnail 01" />
</a></p>
<!--detail for thumbnail 01-->
<div id="detail-01">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 01"><h3>Heading 3</h3>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-01--></div>
<!--thumbnail 02-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-02"><img src="http://placehold.it/160x120&text=THUMBNAIL 02" alt="Thumbnail 01" />
</a></p>
<!--detail for thumbnail 02-->
<div id="detail-02">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 02"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-02--></div>
<!--thumbnail 03-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-03"><img src="http://placehold.it/160x120&text=THUMBNAIL 03" alt="Thumbnail 01" />
</a></p>
<!--detail for thumbnail 03-->
<div id="detail-03">
<img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 03"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-03--></div>
<!--end thumbs--></div>
<!--invoke FancyBox function code-->
<script>
$(document).ready(function() {
$("a.inline").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'autoScale' : true,
'overlayOpacity' : 0.8,
'overlayColor' : '#505050'
</script>
</body>
</html>
Nancy O. -
Deciphering Aperture Web Themes: the html templates v3
version 3 of my Aperture Web Theme html template reference. enjoy
the html templates.
rkid attributes:
Aperture uses proprietary ids within the html documents to identify the parts it needs to play with. These ids are 'rkid' ids. for example,
<ul id="nav" rkid="navbar">
These are the rkid values that I've identified so far:
"navbar"
a <ul> element containing all of the navigation elements.
"active" and "inactive"
rkid attributes to enable the coder to place different formatting on
current and non-current page numbers in the navbar.
eg; <li rkid="active"><span class="currentPage">PageNumber</span></li>
<li rkid="inactive"><a href="IndexPageURL_">_PageNumber</a></li>
"content"
a <div> containing all of the album images and their metadata.
"pictureblock"
a mandatory <table> in which the images are placed, one image per <td>.
the <table> must even be used on the Detail page where only one image is
displayed.
the metadata will be within the "pictureblock" table if more than one
image is displayed so that the metadata can be tied to the image. if
only one image is displayed; i.e., the Detail page; the metadata may be
in a <td> outside of the table that the image is in but still within the
"content" div, usually in the following format:
<div rkid="content">
<table>
<td>metadata
<td><table rkid="pictureblock">
"image"
the rkid for the <img> elements containing the album images, frequently
placed in <dt> elements within the table's cells.
"metadata" (added in Decipher v3)
all metadata for the respective image is specified within this element.
everything within the element is repeated for every metadata value.
the Aperture themes use the <ul> element but <div> also works:
<div rkid="metadata"><p>metaname: metavalue</p></div>
"titleblock"
a <div> containing the title text; usually <h3>; for Journals. the <h3>
element within this element must be given the attribute rkid="text" or
Aperture will ignore it.
"textblock"
a <div> containing the description text for Journals. as with the
titleblock, the <p> element/s within this div must be given the
attribute rkid="text".
"text"
the rkid given to the text data within the titleblock and textblock
elements.
Place holders:
PageTitle
used in the <head> of the html. it's made up of the Album/Journal's name plus a page number. eg; "My lucky album - Page 1".
IndexPageURL
the gallery page/s URLs; may be more than one.
ThumbImageURL
the href links for the images, whether thumbnails or detail full size.
DetailPageURL
used within navbar:
PageCount
PageNumber
PreviousPageNumber
PreviousPageURL
NextPageNumber
NextPageURL
PageCount the total number of pages
PageNumber includes all of the page numbers listed in the navbar, one
occurrence for each page.
_Previous and _Next are more specific and are currently used to draw the
prev/next arrows in the navbar.
ImageName
ImageNameSpace
PlateNameSpace
PlateNumberSpaceSlash
*only seen* when 'Enable Plate Metadata' option in the tag popup menu is
chosen.
used to represent an index of the image in the album. the first image
shown gets the index 1, the second 2 and so on.
for the Image placeholders, the word 'Image' is used.
for the Plate placeholders, the word 'Plate' is used.
space indicates an extra space after the index, probably for html
formatting purposes because it's only used within <dt> elements.
slash indicates an extra / character after the index.
examples:
ImageName > 'Image 1'.
ImageNameSpace > 'Image 1 '.
PlateNameSpace > 'Plate 1 '.
PlateNumberSpaceSlash > '1 / '.
metaname
metavalue
the placeholders for all of the metadata names/values in the selected
metadata set.
PageWidth
not sure if Aperture calculates it based on the width and number of
images being displayed in both gallery and detail pages.
don't know why it's only used in the Special Occasion theme.
CellWidth
the width of the table cells containing the album images. not
necessarily the width of the images. may include margins as specified in
the albuminfo.plist files.
ImageWidth
the width of the image.
TableWidth
the width of the pictureblock table. it can probably be applied to other
elements too but it's length is almost certainly calculated from the
pictureblock table.
Operative attributes:
removeonfirstpage="yes"
used in the navbar to remove the Prev link from the first page.
because it's applied to the <a> element, the <a> element is removed
while leaving an empty <li> in place.
removeonlastpage="yes"
used in the navbar to remove the Next link from the last page.
because it's applied to the <a> element, the <a> element is removed
while leaving an empty <li> in place.
removeonsinglepage="yes"
used in the navbar to remove elements when there's only one page.
used in a <div> in the Art Collection to remove the whole navbar on
single pages.
contenteditable="yes"
used in text elements to indicate that the user can customise the text.
not necessary in titleblock and textblock rkid="text" elements.
in elements outside of the titleblock and textblock elements, content
will not be truly editable unless a textid is assigned to the text
elements. unfortunately, all text elements with textids are always
'common' and can not be specific to any one image.
common="yes"
the element is seen on all pages.
Other attributes:
metaseparator="|"
used in metadata formatting, within the metadata lists.
you can add additional characters. for example, the metaseparator
in the Stock Black theme is " | "; ie, a | bar with a space on both
sides. (Decipher v3)
if the metaseparator is specified and the html template places the
metadata into <li> elements as it does in most of the current themes,
then it produces non-standard html code with the metaseparator between
concurrent <li> elements.
metalayout="paragraph"
used in metadata formatting, within the metadata lists.
if not specified, the metadata will not be exported. (Decipher v3)
singlenesting="yes"
used in metadata formatting. not sure what it does yet.
textid="x"
used to id text elements outside of the titleblock and textblock
elements.
possibly no limit to the number and id names used.
examples used:
textid="copyright"
textid="header1"
picturename="x"
pictureimage="true"
picturename gives the image an id.
pictureimage="true" tells Aperture that the image is a static image
which can be designated by the user during setup of the album. they show
up in Aperture as grey blank rectangles with cross-eyes in the middle.
they do not need to be inside the "content" element
with picturename and pictureimage, we can place as many static images on
the page as we wish.
Assertions:
Aperture uses the rkid values to identify the areas of the html to be
repeated for the respective objects.
standard id and class attributes are only used by the css for formatting and
not by Aperture to write the html data.
Notes:
Aperture is hardcoded to expect and require that the album images are always
within a <table rkid="pictureblock"> element. it is not possible to place
album images outside of the table. all album images must be placed within
<td> cells within the table. the <td> code is repeated for each image.
image metadata is also normally within the rkid="content" element although
it can be outside of the rkid="pictureblock" element.
by default, the textblock rkid="text" element is added when the T+ button is
pressed within Aperture. the textblock element is switched with the
titleblock element when the Title/Text toggle button is clicked.
width and height attributes of <img> elements are rewritten by Aperture
based on the inserted images. placeholders aren't necessary within <img>
elements.
comments are stripped from the html before export some but some
Aperture-proprietary attributes are forgotten and left behind.
some pages use the html 4.0 loose doctype. others use the xhtml 1.0 strict
doctype.
all markup is converted and exported in UPPER-CASE. personally, I prefer
lower-case.
high-ascii characters entered by the user are not converted to their html
entities when available. eg, the © character.
multiple <p> elements can be inserted into the titleblock and textblock
<div> elements but each of them must have the rkid="text" attribute. any
element without this attribute will be ommitted by Aperture.
the reason there are Smart Galleries but no Smart Journals is because you
need to write text between each row of images.
titleblock and textblock elements will not be applied to Galleries or Detail
templates; only to Journals.
if there are more than one titleblock or more than one textblock, only the
first will be used by Aperture.
upon export, Aperture will remove everything from within the rkid="content"
element which is not the pictureblock, titleblock or textblock elements.
(Decipher v3)
some of the Aperture templates have xhtml doctypes but are exported from
Aperture with html 4.0 loose doctypes. weird! worthy of note is the fact
that UPPER-CASE element names is not permitted with xhtml which is
case-sensitive. (Decipher v3)
Questions:
are there variable scopes with each rkid? eg, within the "content" rkid, can
every variable/placeholder be accessed?
why did the Aperture team use Definition List <dl>, <dt>, <dd> elements for
the images and related metadata in the table? easier css formatting?
JavaScript: (Decipher v3)
you can include JavaScript in the html code but cannot wrap it in html
comments because Aperture will remove everything within comments.
Aperture variables such as PageNumber will not be replaced within
attributes such as <body onload="dialog(PageNumber);">.
it is very difficult to use document.write anywhere within the html <body>.
Aperture seems to be using JavaScript to export the html and its code is not
able to cope with more than one instance of document.write in the html
templates. after hours of trial and error, I found that the most stable way
to use JavaScript within the html <body> was to only use one <script>
element and place everything within it. using document.write within a second
<script> element would almost certainly lead to unpredictable exported html,
and instability and crashes in Aperture.
iMac Duo Core 2GHz 2GB Mac OS X (10.4.6)It worked. I still have a few tweaks to do on my final template, but the method I described above works. I've set up my templates like this:
1) one large image per thumbnail page (like a photo essay or photo blog style)
2) same size image on detail page, but with paypal buttons directly below in their own table (I have several different paypal buttons - for different print sizes and a couple other things like postcards, etc.)
The neatest thing about this setup is that since it's all controlled by flat html and css, it looks almost like javascript the way the paypal buttons pop up - the image stays in exactly the same place and the buttons just appear below it (haven't tried it on a slow connection, though, probably a slight delay).
This is great because I hate javascript but sometimes like the immediate visual effects it allows.
This template makes it trivial to create a reverse chronological gallery/journal - kind of like a photoblog - and allows visitors to view the large images without the extra clutter of the buttons, but then they can just click on the image to reveal the buttons and click the image again to hide them.
The benefit of putting these buttons directly into the Aperture templates rather than using a find-replace script to add them to iWeb pages after processing? Well, using Aperture, I can add the PageTitle tag to the Paypal button - it doesn't work in hidden form fields or anything that needs to go inside an attribute, but it does parse using a textarea field, which I hid with CSS - This alleviates the problem many photographer sites have where they ask the buyer to email them with the image name/number they want - this way, the shopping cart automatically knows which image they're ordering.
PageTitle uses the following format: Gallery/Journal Name - Image/Version Name
So using this tag in the Paypal button tells me which image the buyer wants and which gallery they were viewing when they ordered - simple but effective.
Anyway, I know it's been a few weeks since I last replied, but I thought I would post this for others who might be interested in doing something similar - entirely through Aperture. Sorry about the run-on sentences; I'm a bit pre-occupied to proofread today. -
Deciphering web themes: the html templates; expanded reference.
the html templates.
RKID attributes:
Aperture uses proprietary ids within the html documents to identify the parts it needs to play with. These ids are 'rkid' ids. for example,
<ul id="nav" rkid="navbar">
These are the rkid values that I've identified so far:
"navbar"
a <ul> element containing all of the navigation elements.
"active" and "inactive"
rkid attributes to enable the coder to place different formatting on
current and non-current page numbers in the navbar.
eg; <li rkid="active"><span class="currentPage">PageNumber</span></li>
<li rkid="inactive"><a href="IndexPageURL_">_PageNumber</a></li>
"content"
a <div> containing all of the album images and their metadata.
"pictureblock"
a mandatory <table> in which the images are placed, one image per <td>.
the <table> must even be used on the Detail page where only one image is
displayed.
the metadata will be within the "pictureblock" table if more than one
image is displayed so that the metadata can be tied to the image. if
only one image is displayed; i.e., the Detail page; the metadata may be
in a <td> outside of the table that the image is in but still within the
"pictureblock" table, usually in the following format:
<div rkid="content">
<table>
<td>metadata
<td><table rkid="pictureblock">
"image"
the rkid for the <img> elements containing the album images, frequently
placed in <dt> elements within the table's cells.
"titleblock"
a <div> containing the title text; usually <h3>; for Journals. the <h3>
element within this element must be given the attribute rkid="text" or
Aperture will ignore it.
"textblock"
a <div> containing the description text for Journals. as with the
titleblock, the <p> element/s within this div must be given the
attribute rkid="text".
"text"
the rkid given to the text data within the titleblock and textblock
elements.
Place holders:
PageTitle
used in the <head> of the html. it's made up of the Album/Journal's name plus a page number. eg; "My lucky album - Page 1".
IndexPageURL
the gallery page/s URLs; may be more than one.
ThumbImageURL
the href links for the images, whether thumbnails or detail full size.
DetailPageURL
used within navbar:
PageCount
PageNumber
PreviousPageNumber
PreviousPageURL
NextPageNumber
NextPageURL
PageCount the total number of pages
PageNumber includes all of the page numbers listed in the navbar, one
occurrence for each page.
_Previous and _Next are more specific and are currently used to draw the
prev/next arrows in the navbar.
ImageName
ImageNameSpace
PlateNameSpace
PlateNumberSpaceSlash
*only seen* when 'Enable Plate Metadata' option in the tag popup menu is
chosen.
used to represent an index of the image in the album. the first image
shown gets the index 1, the second 2 and so on.
for the Image placeholders, the word 'Image' is used.
for the Plate placeholders, the word 'Plate' is used.
space indicates an extra space after the index, probably for html
formatting purposes because it's only used within <dt> elements.
slash indicates an extra / character after the index.
examples:
ImageName > 'Image 1'.
ImageNameSpace > 'Image 1 '.
PlateNameSpace > 'Plate 1 '.
PlateNumberSpaceSlash > '1 / '.
metaname
metavalue
the placeholders for all of the metadata names/values in the selected
metadata set.
PageWidth
not sure if Aperture calculates it based on the width and number of
images being displayed in both gallery and detail pages.
don't know why it's only used in the Special Occasion theme.
CellWidth
the width of the table cells containing the album images. not
necessarily the width of the images. may include margins as specified in
the albuminfo.plist files.
ImageWidth
the width of the image.
TableWidth
the width of the pictureblock table. it can probably be applied to other
elements too but it's length is almost certainly calculated from the
pictureblock table.
Operative attributes:
removeonfirstpage="yes"
used in the navbar to remove the Prev link from the first page.
because it's applied to the <a> element, the <a> element is removed
while leaving an empty <li> in place.
removeonlastpage="yes"
used in the navbar to remove the Next link from the last page.
because it's applied to the <a> element, the <a> element is removed
while leaving an empty <li> in place.
removeonsinglepage="yes"
used in the navbar to remove elements when there's only one page.
used in a <div> in the Art Collection to remove the whole navbar on
single pages.
contenteditable="yes"
used in text elements to indicate that the user can customise the text.
not necessary in titleblock and textblock rkid="text" elements.
common="yes"
the element is seen on all pages.
Other attributes:
metaseparator="|"
used in metadata formatting, within the metadata lists.
metalayout="paragraph"
used in metadata formatting, within the metadata lists.
singlenesting="yes"
used in metadata formatting. not sure what it does yet.
textid="x"
used to id text elements outside of the titleblock and textblock
elements.
possibly no limit to the number and id names used.
examples used:
textid="copyright"
textid="header1"
picturename="x"
pictureimage="true"
picturename gives the image an id.
pictureimage="true" tells Aperture that the image is a static image
which can be designated by the user during setup of the album. they show
up in Aperture as grey blank rectangles with cross-eyes in the middle.
they do not need to be inside the "content" element
with picturename and pictureimage, we can place as many static images on
the page as we wish.
Assertions:
Aperture uses the rkid values to identify the areas of the html to be
repeated for the respective objects.
standard id and class attributes are only used by the css for formatting and
not by Aperture to write the html data.
Notes:
Aperture is hardcoded to expect and require that the album images are always
within a <table rkid="pictureblock"> element. it is not possible to place
album images outside of the table. all album images must be placed within
<td> cells within the table. the <td> code is repeated for each image.
image metadata is also normally within the rkid="content" element although
it can be outside of the rkid="pictureblock" element.
by default, the textblock rkid="text" element is added when the T+ button is
pressed within Aperture. the textblock element is switched with the
titleblock element when the Title/Text toggle button is clicked.
width and height attributes of <img> elements are rewritten by Aperture
based on the inserted images. placeholders aren't necessary within <img>
elements.
comments are stripped from the html before export some but some
Aperture-proprietary attributes are forgotten and left behind.
some pages use the html 4.0 loose doctype. others use the xhtml 1.0 strict
doctype.
all markup is converted and exported in UPPER-CASE. personally, I prefer
lower-case.
high-ascii characters entered by the user are not converted to their html
entities when available. eg, the © character.
multiple <p> elements can be inserted into the titleblock and textblock
<div> elements but each of them must have the rkid="text" attribute. any
element without this attribute will be ommitted by Aperture.
the reason there are Smart Galleries but no Smart Journals is because you
need to write text between each row of images.
titleblock and textblock elements will not be applied to Galleries or Detail
templates; only to Journals.
if there are more than one titleblock or more than one textblock, only the
first will be used by Aperture.
Questions:
are there variable scopes with each rkid? eg, within the "content" rkid, can
every variable/placeholder be accessed?
why did the Aperture team use Definition List <dl>, <dt>, <dd> elements for
the images and related metadata in the table? easier css formatting?
iMac Duo Core 2GHz 2GB Mac OS X (10.4.6)IMPORTANT!
An updated version is available in thread:
Deciphering Aperture Web Themes: the html templates v3. -
Popup text boxes or shadowboxs
In using Dreamweaver: I want to use a "onClick link" and have a popup text box or even a shadowbox that slightly darkens the webpage.
I will have links to these different popups all over the html page.
I want to specify the size of the box - same for all (with scroll if need be)
I really only need the box to contain text (having the ability to use styles would be nice, but not a game breaker)
Dreamweaver's popup text box does not give me control and is different in all browsers.( in Chrome it says JavaScript Alert at the top of the box - not what I want to see)
I have Dreamweaver CSS5, but am into writing my own css rules. Just need a little support here. ThanksI like jQuery Fancybox2. It's very simple to set-up and it can handle just about anything you care to toss at it. Copy & paste the following code into a new, blank document. Save & Preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Fancybox2 and Divisions</title>
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**CSS Reset, fixes box-model in fluid layouts**/
margin:0;
padding:0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
/**this styles thumbnail container**/
#thumbs p {
float: left;
width: 180px;
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid silver;
/**optional rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**use same size thumbnail images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: "";
clear: left;
display: block;
/**hidden content**/
#detail-01, #detail-02, #detail-03 { display: none; }
img {
max-width: 100%;
margin: 0 auto;
display: block
</style>
</head>
<body>
<header>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2 Viewer</a> with images & divs</h1>
<h2>Details are hidden until thumbnails are clicked.</h2>
</header>
<!--insert thumbnails with links to details below-->
<div id="thumbs">
<!--thumbnail 01-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-01"><img src="http://placehold.it/160x120&text=THUMBNAIL 01" alt="Thumbnail 01" /> </a></p>
<!--detail for thumbnail 01-->
<div id="detail-01"> <img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 01" alt="image 01"><h3>Heading 3</h3>
<p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-01--></div>
<!--thumbnail 02-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-02"><img src="http://placehold.it/160x120&text=THUMBNAIL 02" alt="Thumbnail 01" /> </a></p>
<!--detail for thumbnail 02-->
<div id="detail-02"> <img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 02" alt="image 02"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-02--></div>
<!--thumbnail 03-->
<p><a class="inline" data-fancybox-group="gallery" href="#detail-03"><img src="http://placehold.it/160x120&text=THUMBNAIL 03" alt="Thumbnail 01" /> </a></p>
<!--detail for thumbnail 03-->
<div id="detail-03"> <img src="http://placehold.it/500x320&text=FULL SIZE IMAGE 03" alt="image 03"><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<!--end detail-03--></div>
<!--end thumbs--></div>
<footer>Your footer</footer>
<!--invoke FancyBox on page load-->
<script>
$(document).ready(function() {
$("a.inline").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'autoScale' : true,
'overlayOpacity' : 0.8,
'overlayColor' : '#505050'
</script>
</body>
</html>
Nancy O. -
RMS - Filtros - Energias de los datos por DIADEM
Holaaa, queria saber si en DIADEM, se puede hacer procesamiento de senales, sacarle RMS, ENERGIA, TRANSFORMADA DE FURIER, FILTROS, me pueden enviar unos ejemplos por favor.
Muchas gracias.Hello Gared,
My Spanish is a little rusty, but here are some examples of analysis reports including FFT, RMS, digital filters, etc.:
DIAdem example gallery
A detailed list of all the math functions is DIAdem can be found here:
DIAdem analysis functions
I hope this helps answer your questions,
Otmar
Otmar D. Foehner
Business Development Manager
DIAdem and Test Data Management
National Instruments
Austin, TX - USA
"For an optimist the glass is half full, for a pessimist it's half empty, and for an engineer is twice bigger than necessary." -
Image gallery approach for additional details and add to cart option?
With efficiency and minimalist downloads for smartphone users I would appreciate advice on a product image gallery.
Currently I have an intro page and other simple information pages. My gallery pages ( four distinct pages for different leather goods) need either a pop up or a link to a new page for additional details and an option to add to cart.
Within the image gallery, How should I link each photo to the new detail/cart page? Can clicking the image itself be the action or do I need a button?I made a mistake. I think I got it right this time. The pop up of the title box works but the images are all gone.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Lapinel Arts Leatherwork</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link href='http://fonts.googleapis.com/css?family=Overlock:400,700|Simonetta:400,900|Marcellus|Junge' rel='stylesheet' type='text/css'>
<style>
box-sizing: border-box;
body {
margin: 0;
padding: 0;
background: #fff;
font: 14px/20px 'Lucida Sans',sans-serif;
.wrap {
overflow: hidden;
.box {
float: left;
position: relative;
width: 25%;
text-align: center;
margin-bottom: 24px;
.boxInner {
position: relative;
text-align: center;
margin: 0 12px;
overflow: hidden;
img {
max-width: 100%;
.titleBox {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: -70px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
.titleBox h2 {
font-size: 16px;
margin: 0;
padding: 0 0 5px 0;
.titleBox a {
text-decoration: none;
color: #fff;
.boxInner:hover .titleBox {
margin-bottom: 0;
@media only screen and (max-width : 768px) {
.box {
width: 50%;
margin-bottom: 24px;
@media only screen and (max-width : 480px) {
.box {
width: 100%;
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
</style>
<style>
section, header, nav {
display: block;
box-sizing: border-box;
body{
font-family: 'Marcellus', normal;
background-image: url(DRA-042010-LeatheryTexture-MBFT.jpg);
font-size: 90%;
line-height: 140%;
color: #555;
margin: 0;
padding: 0;
background-color: #FFF;
#hover-image {
background-color: #cfc6b0;
text-align: center;
img {
max-width: 100%;
height: auto;
.container {
width: 85%;
max-width: 1000px;
margin: 0 auto;
color: #000;
header h1 {
font-size: 300%;
line-height: 150%;
text-align: center;
letter-spacing: 4px;
padding: 20px 0;
color: #000;
font-weight: bold;
/* top level navigation */
nav {
background-color: #E5E4E2;
nav ul {
display: block;
text-align: center;
margin: 0;
padding: 0;
nav li {
margin: 0;
padding: 0;
display: inline;
position: relative;
nav a {
display: inline-block;
text-decoration: none;
padding: 10px 25px;
color: #000;
nav a:hover {
background-color: #cfc6b0;
color: #000;
nav span {
display: none;
/* droplist navigation */
nav ul ul {
position: absolute;
z-index: 1000;
left: 0;
top: 2em;
background-color: #E5E4E2;
text-align: left!important;
display: none;
nav ul ul li a {
display: block;
width: 12em;
border-top: 1px dotted #ccc;
.about {
padding: 0 8%;
margin: 0 auto;
text-align: center;
background-color: #E5E4E2;
.about h2 {
font-size: 260%;
line-height: 200%;
margin: 0;
padding: 0;
color: #000;
.about p {
font-size: 110%;
line-height: 150%;
margin: 0;
padding: 0 0 20px 0;
.productsWrapper {
background-color: #000;
overflow: hidden;
padding: 30px 25px;
.product {
float: left;
width: 25%;
padding: 12px;
text-align: center;
color: #fff;
.product img {
border: 1px solid #fff;
.view_details {
text-decoration: none;
display: inline-block;
padding: 15px 20px;
border-radius: 6px;
border: 1px dotted #ccc;
color: #555;
background-color: #fff;
.view_details:hover {
background-color: #E5E4E2;
#mobileTrigger {
padding: 10px 25px;
font-size: 120%;
display: none;
color: #000;
footer {
clear: both;
background-color: #cfc6b0;
padding: 30px;
color: #fff;
text-align: center;
overflow: hidden;
footer a {
text-decoration: none;
color: #000;
float: left;
width: 33.33%;
color: #000;
border: #000
.footerBox {
float: left;
width: 33.33%;
color: #000;
@media screen and (max-width: 768px) {
.container {
width: 100%;
.product {
width: 50%;
#mobileTrigger {
display: block;
text-align: right;
nav ul {
display: none;
nav li {
display: block;
text-align: left;
nav a {
display: block;
font-size: 120%;
border-top: 1px dotted #ccc;
nav span {
display: inline-block;
float: right;
font-size: 130%;
/* droplist navigation */
nav ul ul {
position: static;
nav ul ul li a {
width: 100%;
@media screen and (max-width: 480px) {
.product {
float: none;
width: 100%;
body,td,th {
font-family: Marcellus, normal;
#copyright {
color: #000;
font-weight: bold;
</style>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery.cycle2.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
//activate mobile navigation icon when window is 768px
$('#mobileTrigger').css('cursor','pointer').click(function() {
$('#mobileTrigger i').toggleClass('fa-bars fa-times');
$('nav ul').toggle();
// show main desktop navigation onresize/hide sub navigation
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() > 768) {
$('nav ul').show();
$('nav ul ul').hide();
//listen for navigation li being clicked
$('nav ul li').click(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//events if window is less than 768px
if ($(window).width() < 768) {
//stops submenu sliding up when mouse leaves mobile
$('nav ul ul').show();
else {
//activate desktop submenu on hover
$('nav ul li').mouseenter(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//desktop submenu slides up when mouse leaves ul/li
$('nav ul ul').mouseleave(function() {
$(this).slideUp();
$('nav ul li').mouseleave(function() {
$(this).find('ul').slideUp();
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];}}
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];}
</script>
<style type="text/css">
</style>
</head>
<body onLoad="MM_preloadImages('810_0776_smaller.jpg')">
<header>
<h1>LAPINEL ARTS LEATHERWORKS</h1>
<nav>
<div id="mobileTrigger"><i class="fa fa-bars"></i></div>
<ul>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PROCESS</a></li>
<li><a href="#">PRODUCTS<span><i class="fa fa-bars"></i></span></a>
<ul>
<li><a href="#">PURSES</a></li>
<li><a href="#">POUCHES</a></li>
<li><a href="#">TOTES</a></li>
<li><a href="#">WALLETS</a></li>
</ul>
</li>
<li><a href="#">CART</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<section class="about">
<h2>PURSES</h2>
<p>There are several styles and sizes of purses available. Custom orders can be arranged but most of these purses are unique and with limited runs of art styles.</p>
<p>Please click on the detail button for larger and additional views and the opportunity to add the item to your cart.<strong></strong></p>
</section>
<div id="hover-image">
<div class="wrap">
<!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>
<!-- end boxInner -->
</div>
<!-- end box -->
<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>
<!-- end boxInner -->
</div>
<!-- end box -->
<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>
<!-- end boxInner -->
</div>
<!-- end box -->
<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>
<!-- end boxInner -->
</div>
<!-- end box -->
</div>
<!-- end wrap -->
<footer>
<div class="footerBox"><a href="mailto:[email protected]">EMAIL CATHY </a></div>
<div class="footerBox"><a href="https://www.facebook.com/LapinelArtsLeatherwork"> FACEBOOK</a></div>
<div class="footerBox">COPYRIGHT 2015</div>
</footer>
</div>
</body>
</html> -
Web gallery/journal export detail image preset
what do the settings actually translate to on the web page? is it a different image size?
Hi Philip,
You can't. -
Problem loading images in adobe bridge html photo gallery
Can someone please, please help me!? I can not figure out why the images will not load in my adobe bridge html photo gallery cs5. I am not getting any error messages in Firefox and just the x in internet explorer.
Here is the link to the gallery page on the site: http://www.irishwetlands.ie/Gallery.html
I created the gallery as a html file for compatibality reasons due to accesbility issues with flash, and followed the general insturctions. The gallery folder is called wetlandsgallery and it is loading everything style-wise except the images themselves.
I then made the gallery within an iframe so it would be more similar to the other pages on the site and contain the menu bar - but no change on the lack of images!
Having looked around online I think it might be something to do with the bin folder?? Does this have some secutity somewhere thats protecting the images? I am also unsure if I filled in the FTP info correctly when creating the site as I was getting the message "could not connect to FTP server" so I had to copy over the file from my hard drive to the server provider files. All the tutortials say to load your gallery and no mention of what to do when it won't connect to FTP server.
If you could also tell me how to edit the image sizes that would be a great help too, as any size changes I make to either the bin/large or bin/thumnail images makes no difference in what appears in the preview?
Help would be very greatfully appreciated as I am pulling my hair out trying to figure it out with no sucess and a possible bald patch!
Thanks in advance,
ÁineHello Áine,
1. Is it really necessary to comment out this part in your source code?
<!--<p><img src="images/GalleryImages/Gallery1_
-----stuff del-----
Grasshopper" title="Grasshopper" />
</p><br />-->
Using your source code without these things I could see some of your images.
2. Looking to your website with my IE8 into image 7 (e.g.) I saw this:
what means there is a reference to a html file, not to an image. ???
3. Here it becomes interesting (completely contrary to my point 2.), looking for your path:
http://www.irishwetlands.ie/images/GalleryImages/Gallery1_Selection%20of%20IRWC%20members% 20at%20the%20Gearagh.jpg
I can see this image in my IE8 (some people in front of a "wetland". But still I've to assume (as Murray already did too), that there is something wrong with your upload and the pathes.
4. Allow me to make one brief point, we talked about here on several occasions: please don't use spaces in image, folders or filenames. I'll quote Murray: In general, URL encoding spaces does not lead to problems. ... Whatever the details are, though, using spaces in filenames or paths is a bad practice which WILL lead to problems.
5. What concerns the image sizes, maybe later (I didn't understand your question correctly I fear). There is still my language barrier, I'm sorry.
Hans-Günter -
Adding a "static" image to selected gallery
Hi there,
I've been working with the gallery with great success so far,
but I'm stumped on trying to add another feature. As you can see in
this example:
http://www.thirstymango.com/troupehipnotica/mardi_screenshot.gif
where the big red asterisk is, I want an image to display (in
my case, an image of the flyer for this event) for each event. So,
there will be a different large image (say, 150x200px) for each
gallery selected. I can't figure out how to insert an image. I
tried the following in the photos.xml for a particular gallery
(here, "mardi.jpg"):
<sitename>Mardi Love "Smooth and Simple"
Show</sitename>
<photographer1>Eric Denson</photographer1>
<photographer2>Dina Lydia</photographer2>
<image>mardi.jpg</image>
<contactinfo>
http://flickr.com/photos/wordofmouth/</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
-tried placing the {image} in the html document, and still no
luck. I feel like I'm really close.. -or, maybe not! Can someone
please help?
Thanks so much!
LisaThanks so much for looking at this!! I'm still having trouble
with the image display. The image (mardi_love.jpg) lives in the
same location as the photos.xml file, so I believe I'm referencing
it correctly. Am I missing a little detail of some kind? Here is
what I have in the html document:
<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><p id="albumName"
spry:region="dsGallery"><img src="{flyerimage}" width="250"
height="306"><br />
Photographs by:<br />
{photographer1}<br />
{photographer2}</p>
see <a href="links.html">Links page</a> for
photographer info.
</div>
and here is the .xml source (I took Kin's advice on renaming
to flyerimage):
<sitename>Mardi Love "Smooth and Simple"
Show</sitename>
<photographer1>Eric Denson</photographer1>
<photographer2>Dina Lydia</photographer2>
<flyerimage>mardi_love.jpg</flyerimage>
<contactinfo>
http://flickr.com/photos/wordofmouth/</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
What I'm seeing is a broken image with the dimensions I've
set in the html document.. Here's a screen shot:
http://thirstymango.com/troupehipnotica/site/mardi_screenshot.gif
I really appreciate your help!
Lisa -
Can't load images for photo gallery
Hi All,
This is my first stab at using Spry and I've run into a small
problem. I can't get my images to show up for the thumbs or the
large image. And when I read the article for this I only got more
confused.
quote:
Now you can make use of these new data points in the album.
Start by replacing the hard coded image folder paths to the values
used in the XML file.
In the thumbnail 'src' path, remove the 'thumbnails/' and
replace it with the XML value. Make sure to remove the forward
slash since that is already stored in the XML value for the path.
Repeat for the main IMG tag. Remove the 'images/' from the
'src' field and replace it with the XML value.
Now you have to tell the dynamic region that you will be
using data from the new dataset. Add the data set name to the
spry:region attribute, separated by a space.
When it says "replace it with the XML value", how do I do
that? What XML value? Can someone give me an example? Do I spec out
the directories in the XML file or within the code on my
gallery.html page?
Here's my dir structure
gallery.html
-photo_gallery (dir)
--photo.xml
--gallery (dir)
---pic1.jpg
---pic2.jpg
---pic3.jpg etc.Hi Petron,
Sorry for the confusion.
You can do either. It depends on how you structure your XML.
The most flexible way would to just have the image name in
the XML file. That will let you change your folder structure
without having to update the file.
So your XML can say:
<photos>
<photo name="pic1.jpg" />
<photo name="pic1.jpg" />
</photos>
And your <img> tag can be:
<img src="gallery/{@name}">
{@name} is the data reference for your data set which
contains the image info.
But, if you have the full path in the XML:
<photos>
<photo name="gallery/pic1.jpg" />
then your img would be <img src="{@name}" />
Either way, the full path has to be built to the .jpg file.
The first way is probably better...
In my gallery tutorial, we start out with one gallery. But
later on, we expand it to use multiple galleries. We use one XML
file to tell use the image directory:
<galleries>
<gallery>china</gallery>
<gallery>egypt</gallery>
Where we can use these values as folder names.
Let me know if this helps. I don't want to give too many
unnecessary details that might confuse the issue.
If you have a sample URL, we can accurately help you.
Thanks,
Don -
Size of portrait-orientation images in Flash gallery
I've created a website using Lightroom. It uses the Flash engine with the "Paginate" option. I specified "large" for both thumbnails and images. With the monitor resolution set at 1280 by 1024, there are 200 pictures in the gallery, and these are displayed on the left-hand part of the screen as ten pages of 20 pictures each (4 columns, 5 rows).
When in gallery view (which is the default) any portrait-orientation images on the right-hand half of the screen are a bit smaller than I'd like; they're the same height as landscape-orientation images. If, however, I switch to the slideshow view, portrait-orientation images are displayed larger, using the available space more effectively. What's weird is that if I switch back to the gallery view, the portrait-orientation images are still displayed as they were under the slideshow. (The same thing happens under IE and Firefox.)
So, if I run the website without using the slideshow button, portrait-orientation images are one size (too small in my opinion). But if I click the slideshow button and immediately click the same button to go back to the gallery view, the portrait-orientation images are displayed at a larger, more appropriate, size. This change seems to be sticky; even portrait-orientation images that I haven't previously viewed are displayed at the larger size once I've switched to the slideshow and back again. (But refreshing the web page resets everything back to its original state.)
It's not a great problem, but it's a bit weird.(Thanks for the reply and sorry for not responding more quickly.)
I don't think it's cache-related; I can clear the cache and it makes no difference to the behaviour.
It seems as if the flash module calculates the best-fit size and gets a different result depending on whether or not I've visited the slideshow view, even though I'm in the gallery view and the amount of available screen space in the gallery view hasn't changed just because I've visited the slideshow view and come back again.
As I say, it's not a big problem; it's just a bit weird.
Maybe you are looking for
-
Multiple values from a sequence ?
Hi all, how can i guarantee that a user gets multiple values from a sequence in a row? (for example : 100, 101 ,102, 103) It should not happened that another user gets a sequence value such as 102. Can i solve this with sequences or do i need a table
-
Keyboard shortcuts are blocked in Indesign
Hello, I can't move objects with the arrows on my keyboard. I can't move my cursor up, down, right or left with the arrowe. I can't delete an object with the delete button on my keyboard. Anyway all the shortcuts don't work anymore. It would be reall
-
Disable .swf (Flash File) Generated as an Attch in Email Delivered byIBOT
.swf Adobe Flash file is generated when i am scheduling an IBOT to the user , In the IBOT i am delivering an Answers request and i can access the answers request and ATT288***.swf File is generated as an attachment , How can Disable that file from ge
-
Bookmark tool bar shows if I'm in customization but nothing is there and no bookmarks will save. I've done both a refresh and uninstall/reinstall and nothing changes.
-
Feature Request - Bring back the show progress bar
Just in case Verizon is looking for suggestions here, can you please bring back the progress bar that was behind the start/end times in the guide? In the current guide, there is no quick graphical cue to represent how much time has progressed in the