Photo Gallery CSS
Hi all, when adding a description to the gallery items within a BC gallery I cannot see the font as the CSS globally for the site is set to white.
Does anyone have a work around to change the photo descriptions font colour to black?
Can we modify the lightbox script to change the description text font colour?
http://www.upowerzegovanuatu.com/about.html
See Meet our Staff...
Hey Liam!
Thanks for your reply.
The site is here: villabiru.com
THe caption is on the second photo in the photo gallery.
Sorry about this. I am just not the code legend that you are.
I have since changed the CSS to
#imageData .caption {
color: #333;
But it is still not working.
Where are these classes generated anyway? They are not in Modulestylesheets as a search does not bring them up.
Regards,
Mary
Similar Messages
-
Spry Photo Gallery Image Size via CSS
Hello!
I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
Thank you for your help!!!
Kind regards,
JoergI see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts. -
Photo Gallery combined with three column CSS
Hi, I am trying to implement your photo gallery into our
school site and I am having trouble with the layout. I am using a
three-column layout created with CSS and JS, and then placing the
photo gallery inside of this. What happens is when you pull up the
page the three column layout does not position everything correctly
until you resize the browser window (ever so slightly). Help, have
been staring at CSS and JS code now for about a month and cannot
get it to behave, any help would be greatly appreciated. Thanks.
HSPVA Photo
Gallery"kjuliff" <[email protected]> wrote in message
news:eqij22$are$[email protected]..
>I can reproduce your problem, gnd4evr&evr. I have XP
an IE7 and FF2.
>It's fine
> in FF2 but not in IE7.
>
> I have a similar problem, and I think it's related. This
problem
> really needs
> addressing!
>
> Go to
http://www.coolabah.com/spry/demos/gallery/
and look at the
> bottom of
> the page (in either IE or FF). You will see a google
adsense div.
> Although it
> is specified in it's div tab as being 15 px in height,
it takes up
> much more
> than that.
>
> I HAD wanted to have these google links at the top of my
gallery, but
> cannot
> as I cannot force the div to be only 15px in height.
>
> I posted this problem a few weeks ago but no one
answered.
Your Google ads are in an iframe. This rule will get you
started
iframe {
height: 2em !important;
position: absolute;
top: 650px;
You can leave the position static if you like, and it will
move up and
down with your images - I found that a bit distracting,
though. If you
leave it static, use a top-margin to establish space between
your image
and the ads.
The !important notation is required for the height,
indicating either a
conflict somewhere in your markup or CSS, or poor Google code
(not
uncommon).
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design" -
Can a photo gallery like this be created in html/CSS?
http://jeffsullivan.smugmug.com/Landscapes/National-Parks/Zion-National-Park-Utah/1946310_ 6PtgP#136213013_XVhBQ
I like the way these galleries expand to browser width - both the thumbs and big image enlarge. I want to learn to make a photo gallery (+ slideshow) perform like this or hire someone with the specific skill set needed to make it for me. I've looked around quite a bit online at photo gallery apps, both free and for sale, including some offered by forum regulars (thanks!), but haven't found one I really liked.
My intent is not to copy this gallery (that would be stealing), just to adopt the expanding images- to browser width feature.
I know Flash could do it but I don't see .swf anywhere in the source... would it be done with Javascript or a combination of apps?What I didn't mention before is that the photo gallery I want will be only one part of a community-based commercial site under development that needs to integrate with other parts.
That's why I'm asking what sort of developer/skills I'd need to make this happen.
I see. OK, for starters you'll need a firm grasp of XHTML, CSS, JavaScripting, and server-side programming such as PHP and MySql databases.
You also might like to look at an open source Groupware solution such as TikiWiki that has a lot of stuff already built into it.
http://info.tikiwiki.org/tiki-index.php
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
How do I do a very basic CSS customization on the standard Photo Gallery Module lightbox?
Hi,
All I want to do is make the text description that appears when you click on a picture within the standard photo gallery a different colour.
If I view source on a gallery page I see the CSS file used is Catalyststyles/lightbox.
Any help would be appreciated.Thanks Liam,
I found that I can target that Caption in my style sheet by adding a the style:
#imageData #caption
my new style here -
HTML/CSS photo gallery updatable in Contribute?
I'm putting together a website for a client who wants a photo
gallery which they can update on a fairly regular basis.
They'll be using Contribute to maintain other parts of the
site, and I'd like to be able to give them the same access to the
gallery, but the majority of more interesting ones (PVII, for
example) seem to be a mite complicated for a Contribute update.
Can anyone recommend an interesting, sophisticated-looking
gallery which can fit these criteria?
Many thanksTrentSC wrote:
> I'm putting together a website for a client who wants a
photo gallery which
> they can update on a fairly regular basis.
>
> They'll be using Contribute to maintain other parts of
the site, and I'd like
> to be able to give them the same access to the gallery,
but the majority of
> more interesting ones (PVII, for example) seem to be a
mite complicated for a
> Contribute update.
>
> Can anyone recommend an interesting,
sophisticated-looking gallery which can
> fit these criteria?
Hi,
You might take a look at Nadia's templates - she has a couple
of
Photographer specific offerings.......
http://www.csstemplates.com.au/photography_csstemplates/index.shtm
chin chin
Sinclair -
http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html
On mouseover, selected thumbnail expands behind other
thumbnails instead of hovering over them. Works fine in FF.
Is there a way to fix/override this?@Kin
The gallery demo files do not put an anchor link around the
thumbnails. The article you list is describing how to alter the
files for (newer?) examples that require about 8 different include
files -- which, given the already HUGE download hit required to run
a photo gallery, seems excessive.
Can adobe not write up a solution that works for the sample
files for the gallery that only requires 3 includes + 1 css file
(which can be added to your own style sheet to avoid yet another
file download)?
Or, is there someway to grow the thumbnails from the bottom
right corner, thus avoiding any overlap by subsequent thumbs? I
tried setting the grow from center to false in SpryEffects but it
appeared to have no effect on the function in the gallery. -
Data not dynamically updating in photo gallery
The page in question is
this
photo gallery.
The primary issue is when one thumbs through the images, the
"photoID" does not update. It remains at the first "photoID" that
is encountered, and in this case, it is 729. The "title",
"description" and so forth remain locked to the first entry as
well, yet the photograph updates "@path".
I've been working at this for almost two days and have tried
almost every possible combination. I've copied over the older
framework files from my other site (which has this working
successfully), modified it to work in this instance, and it fails
here. The XML output is correct.
function photogallery(){ //Photo gallery
?>
<div class='right'>
[Snip out collapse panel...]
<div
spry:detailregion="dsGallery">{photoID}</div>
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src="{@path}" /></div>
</div>
<div class='left'>
<div id='previews'>
<div id='controls'>
<div id='transport'>
<a href='#' class='previousBtn'
title='Previous'><img src='/res/images/buttons/rewind.png'
alt='[skip-back]' border='0' /></a>
<a href='#' class='playBtn' title='Play/Pause'
id='playLabel'><span class='playLabel'><img
src='/res/images/buttons/play.png' alt='[play]' border='0'
/></span><span class='pauseLabel'><img
src='/res/images/buttons/pause.png' alt='[pause]' border='0'
/></span></a>
<a href='#' class='nextBtn' title='Next'><img
src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
/></a>
</div>
</div>
<div id='thumbnails' spry:region='dsGallery'>
<div class='thumbnail' spry:repeat='dsGallery'><a
href='{@path}'
onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
src='{@path}' width="80" height="80" /></a></div>
</div>
</div>
</div>
<div style='clear: both;'> </div>
<?
}Even doing that was no help unfortunately. Here is an
extended snippet,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Urban Up, a web-site by Sherman
Cahal</title>
<meta http-equiv="Content-Type" content="text/xml;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"
media="screen" />
<script type="text/javascript"
src="includes/SpryAssets/SpryEffects.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryImageLoader.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryNotifier.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SpryThumbViewer.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SpryImageViewer.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SprySlideShowControl.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/gallery_init.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/gallery_xds.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("<? echo
$tmpfname; ?>", "/gallery/photos/photo");
</script>
</head>
function photogallery(){ //Photo gallery
?><div class='right'>
<div spry:detailregion="dsGallery">{photoID}
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src="{@path}" /></div>
</div>
</div>
<div class='left'>
<div id='previews'>
<div id='controls'>
<div id='transport'>
<a href='#' class='previousBtn'
title='Previous'><img src='/res/images/buttons/rewind.png'
alt='[skip-back]' border='0' /></a>
<a href='#' class='playBtn' title='Play/Pause'
id='playLabel'><span class='playLabel'><img
src='/res/images/buttons/play.png' alt='[play]' border='0'
/></span><span class='pauseLabel'><img
src='/res/images/buttons/pause.png' alt='[pause]' border='0'
/></span></a>
<a href='#' class='nextBtn' title='Next'><img
src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
/></a>
</div>
</div>
<div id='thumbnails' spry:region='dsGallery'>
<div class='thumbnail' spry:repeat='dsGallery'><a
href='{@path}'
onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
src='{@path}' width="80" height="80" /></a></div>
</div>
</div>
</div>
<div style='clear: both;'> </div>
<?
And the XML file that is created:
<?xml version="1.0" encoding="utf-8"?>
<gallery base = "">
<photos id = "images">
<photo path="
http://www.urbanup.net/content/20070629/photos/1_13_251.jpg">
<photoID>729</photoID>
<title>Downtown</title>
<description><![CDATA[]]></description>
</photo>
<photo path="
http://www.urbanup.net/content/20070629/photos/1_19_3.jpg">
<photoID>834</photoID>
<title></title>
<description><![CDATA[A shared common area divides
the new homes along South Mill.]]></description>
</photo></photos></gallery> -
Need "Rotate" Function in Photo Gallery
All of my screen grabs end up 90 degrees rotated in PhotoGallery. There is no rotate function in Photo Gallery so to deal with these images I first open them in Adobe Editor on iPad and rotate them then save them to PhotoGallery.
Is there a better way to do this?To the example that you have linked to above, make the following additions
<div id="arch-container" style="position:relative;">
<div id="arch-img" style="position:absolute; top: 170px;"><img src="images/arch-img.png" alt="arch_img" width="959" height="195" /></div>
</div>
I have used inline styles to make it easy on myself, but in reality you would put the style rules in the corresponding element selector in the CSS. Also, you would readjust the values to suit.
Also, it is worth mentioning that placing a width and height on your image as you have done, should really be done using CSS.
Added:
As a side note, I have gotten into the habit of using classes for all of my style rules. I came to the conclusion that this is the way to go when trying to analyse a problem within my web page. ID's are unique per document and as such are used when manipulating the DOM using JavaScript. Now when I see an ID in one of my documents, I know that it is not a styling matter as in CSS, but a problem within my script.
Take the above note as a thought, because there is a ongoing debate about this.
Message was edited by: Altruistic Gramps -
HELP with photo gallery in a table
I have a table that is acting as my photo gallery.
Each thumbnail pressed trigers the image to expand into the first column of the table. However, depending on whether I select a vertical or horizontal image, the rest of the thumbnails get shifted over to accommodate room for the large image.
My question is: is there a way to somehow FIX the dimensions of that first column so that the thumbails will stay in place??
Thanks.Use CSS floats and margins to set up your gallery (view source to see the code).
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
Nancy O. -
Photo Gallery start up problem
I have a glitch and it's probably me … but here's what
I know.
About Don Booth's Photo Gallery:
It's great. Everything is good - integrated with my CSS -
looks nice.
When the page loads all is well except the first image in the
Gallery does not display in <div id="mainImageOutline"... (and
the first thumbnail is not highlighted). While I'm building and
testing this is OK. Just click a thumbnail and everything works
well.
In the demo, the Gallery is operational by default and starts
up with the first thumbnail and Spry:detail produces the
corresponding image (automatically). That's what I want.
About my code:
Except for a couple of "page layout" divs that I have,
consistent with my own site-wide style sheet conventions, such as
<div id="wrapper"> and <div id="maincontent"> I have:
1. Copied Don Booth's xhtml code directly from the
Spry_1_1_022408 download sample.
2. Copied Don Booth's css code directly from the same
download sample.
3. Copied Don Booth's gallery.js directly (without change as
far as I know).
The only significant change (apart from CSS and xhtml
structure) in my work is - I added an additional Spry:detail div to
present additional datapoints from xml. This is not relevant to my
question because the issue that concerns me is consistent if I
remove this second detail div. The start-up problem remains.
The URL for the gallery page in question is:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
I imagine the problem is in gallery.js. You should know that
javascript is a bit like dungeons and dragons to me.
I have an error report:
Error: dsPhotos is not defined
Source File:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/includes/gallery.js
Line: 55
So, when I see:
var gAutoStartSlideShow;
if (gAutoStartSlideShow == undefined)
gAutoStartSlideShow = true;
I imagine I'm looking at something useful but I don't know
what to do with it, or if it is the right code to focus on. I
respect the relationship with level 4 support engineers, but after
trying to solve my own issue for a few weeks I decided it was time
to submit my question. How do I get Photo Gallery to start up like
the demo?
Additional information:
There is also a series of error reports that show when the
Gallery is playing (for example):
Warning: Expected end of value for property but found
'-0.0775'. Error in parsing value for property 'opacity'.
Declaration dropped.
Source File:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
Line: 0
I don't think it is related, but that's what I know.
I tried to copy my xhtml (below) but it caused this message
to exceed allowed size. But I don't see that xhtml is the problem.
You can see the source at the URL (above).Hi Latauro,
Sounds like you need to turn your Slideshow into a Track, and then set the Track to display as 16:9 Letterbox; but first, you'll also need to encode your slides as wide Mpeg 2 clips (encode set to 16:9), too; to whatever duration you have them set in the Slideshow, currently (if they're not already wide encoded clips).
It would be good to stick some same duration audible or silent same format and bit rate audio underneath each of the new movie slides, to present players a nicely packed VOB.
Take care,
Trai Forrester
TFDVD Research Labs
http://www.DVDVerification.com
PS. If this helps you, would you please remember to declare the thread as "Solved". Although probably hopeless, someone should make a run to try and catch up with good Drew!! (see what happens Hal, when you take some time off?! -
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 Expertise on Custom Photo Gallery Template
Hello there - this question isn't really just Mac specific, but I don't see a forum that will post to ALL Photoshop users.
I'm in need of some help customizing a Photo Web Gallery in Photoshop. I've done one entirely without tables, using my own CSS to style it. My thumbnail page would be similar to the coding for the index page of the Lightbox styled gallery in this tutorial: www.photoshoplab.com/lightbox-web-photo-gallery.html
However, my problem is that even though my design doesn't use tables, when I'm in the automation dialogue in Photoshop, it still shows the table row and column parameters - greyed out - from the last time a table-based gallery template was used. And Photoshop is using this info to decide how many thumbnails to put on the gallery index page. It simply multiplies the row * column to limit the number of thumbnails on that first page. Very odd and not very nice looking, as it won't finish a row this way.
I notice the Lightbox styled gallery template does away with the table for the thumbnails as well. How, then can I gain control over showing "X" number of images per thumbnail page? Say I have a gallery of 40 images - how can I show 20, max, per page? Or 10? Or whatever needs to be specified to suit the number of images in that gallery?
Also, at runtime, Photoshop is stripping some small but important bits of code out of my customized templates. I've tried to put some HTML elements in to force the "previous next" text below the thumbnails, but it gets stripped out during the generation of the gallery.
The results can be seen here:
www.springfieldmo.gov/cityconnect/images/galleries/dating/index.html
Notice that the first thumbnails page shows 21 images. That's because the greyed out row, column info in the automate dialogue was 3 rows of 7 columns.
Is there any way to get to the actual code that Photoshop runs to generate the galleries? Seems like that's where it would be looking for the table info.
Any thoughts? I'd sure appreciate any info you can give or point me to someone who has done a pure CSS automated Photoshop gallery.
Sincerely,
Christopher Akins
Web Coordinator
City of Springfield, MOThanks Curt, In fact I think I have found the files under
user\Application Data\Adobe\Bridge CS5\Adobe Output Module\MediaGallery\
I got there as a result of your suggestion and although I didn't find /roaming/ I did find the following directories
/document1/
/preview/
/previewinbrowser1/
So I am guessing these contain the files I need to work with. Some of the files are json files which is a bit new to me but I think there is a fair bit of resource around about it.
Regards, Les -
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. -
Photo Gallery Lightbox Navigation not working
Hi,
The previous, next, and close buttons don't seem to be working for some of the photos on this page: http://vanessastone.namastecms.com/media/photos/community for the photo gallery lightbox. The issue only appears to be happening in Chrome and Safari. Firefox is working fine. I looked around in Chrome's Developer tools but didn't find any hints as to why that might be happening. Any help is greatly appreciated!
Thanks,
JeffSorry InteractiveGuru, it looks like I posted on the wrong thread. The reason the buttons aren't working is because of your CSS regarding your left, right and close buttons are not suitable. You'll want to either revisit your CSS, or revisit how the buttons are formatted (e.g the three <a>'s).
Maybe you are looking for
-
"Copying Music failed. The filename was too long or invalid."
I've been trying to 'consolidate library' inorder to get all my music held and managed under Itunes so I can delete it from other places on my computer & avoid holding multiple copies (in line with Chris CA's guidance in this thread https://discussio
-
Missing feature at BES 10. Connecting public folder at Microsoft Exchange
Dear Develpment, one of the different using BB to iOs or Android device was the it was possible to connect to public folder by BES 5.x. So it was possible to syn your public contact folders of all employee of our company. We must do nothing, if data
-
I have a after row trigger on a table which extracts data from another database through a database link. On insert/update of the row it updates the requisite tables in the database on which it is created.An exception is returned when if the rows are
-
Song library did not completely transfer
Obtained a new Dell Venue tablet. When I shared from original computer not all of my song library transferred. Why?
-
Users are receiving the above error when accessing an app via the Web. Please advise