I am having trouble creating a photo gallery using CSS
Hi, I have created the gallery for the most part. I cannot seem to get the spacing and alignment correct so it falls where it needs to on my page. Lastly, I cannot seem to get the photos for the thumbnails to view properly. Any help is greatly appreciated! Thanks in advance!
CSS:
/* ----------NEW-------------- */
body {
background-color: #ccc;
font-size: 0.95em;
font-family: Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
a {color: #ff6677;}
a:visited {color:#ff6677;}
a:hover {color: #564b47;}
a:active { color:#000000;}
h1 {
font-size: 1em;
text-transform:uppercase;
font-weight:normal;
background-color: #666;
color:#ccc;
padding:15px;
margin:0;
h2 {
font-size: 10px;
font-weight: normal;
font-family: Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
text-align: center;
color: #000;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
img.download {vertical-align:middle;}
/* ----------container zentriert das layout-------------- */
#container {
width: 1030px;
margin: 0px auto;
padding: 0;
background-color: #ffffff;
background:#fff url(../images/back.jpg) 75px 10px no-repeat;
/* Removing the list bullets and indentation */
#container ul {
padding:0;
margin:0;
list-style-type:none;
/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
#container a.slidea {
background:url(images/JUI_JIANG_ARTS_CENTER_1.jpg);
height:93px;
width:93px;
#container a.slideb {
background:url(images/JUI_JIANG_ARTS_CENTER_2.jpg);
height:93px;
width:93px;
#container a.slidec {
background:url(images/Special_JuiJiangArtsCenter3.jpg);
height:93px;
width:93px;
#container a.slided {
background:url(images/Special_JuiJiangArtsCenter4.jpg);
height:93px;
width:93px;
* html #container a.slided {
width:93px;
w\idth:93px;
#container a.slidee {
background:url(images/Special_JuiJiangArtsCenter5.jpg);
height:60px;
width:93px;
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
width:198px;
height:386px;
/* move the thumbnails into the correct position */
#container ul {
margin: 5px;
float: right;
clear: none;
/* change the thumbnail border color */
#container a.gallery:hover {
border:1px solid #fff;
/* styling the :hover span */
#container a.gallery:hover span {
position:absolute;
width:372px;
height:372px;
top:10px;
left:75px;
color:#000;
background:#fff;
#container a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:5px;
#container a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:5px;
#container a.slideb:hover img, #container a.slidei:hover img {
float:right;
#container {
background:#fff url(../images/JUI_JIANG_ARTS_CENTER_1.jpg) 75px 10px no-repeat;
/* ----------banner for logo-------------- */
#banner {
background-color: #ccc;
text-align: right;
padding: 0;
margin: 0;
#banner img {padding: 0 0 10px;}
/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 10px 0 0 0;
margin: 0 0 0 0;
p, pre{
line-height:1.5em;
padding:0 10px 10px;
margin:0;
pre, code {
font-size:1.3em;
/* --------------left navigavtion------------- */
#left {
float: left;
width: 107px;
margin: 10px 0 0 10px;
padding: 0 0 0 0;
background-color: #ffffff;
#left a {
color: #ccc;
text-decoration: none;
color: #000;
#left ul {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
font-size: 10px;
text-decoration: none;
font-family: Arial, SunSans-Regular, Sans-Serif;
line-height:1.0em;
#left .static {
color: #FC0;
#smallnav {
color: #FC0;
font-size: 8px;
/* -----------footer--------------------------- */
#footer {
clear: left;
margin: 0;
padding: 7px;
background-color: #fff;
/* -----------copyright--------------------------- */
#copyright {
font-size: 5px;
font-family: Arial, SunSans-Regular, Sans-Serif;
padding: 0 0 0 0;
Similar Messages
-
Creating a photo gallery using behaviors?
I am re-designing a website, and I'm a little stuck on how to re-create the photo gallery presentation of the original web site. Here is the original gallery:
http://www.sarahegeller.com/photos
What I'd specifically like to reproduce is the ability to click on a thumbnail, which would bring up the larger image, but with the original window remaining behind, greyed out. I assume this is something I can do with behaviors, but there doesn't seem to be a behavior that addresses this, at least among the behaviors dreamweaver CS 3 comes with. I assume a behavior that would give me the effect I want exists on the dreamweaver exchange, but I couldn't find one. Am I even correct in assuming I could achieve the effect I'm looking for using a behavior?
I'm using dreamweaver CS 3, on a mac.
Thanks for taking the time to read this query.
Yours,
NickThe effect you're aiming for is a currently popular one known as a Lightbox.
There is no in built Dreamweaver behaviour for this. You'll need to look for 3rd party solutions such as jQuery.
From the page code:
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/auto_image_handling.js"></script>
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js"></script>
The effect on that particular site is created with a Drupal module: Lightbox2
http://drupal.org/project/lightbox2
You may be able to use:
http://www.lokeshdhakar.com/projects/lightbox2/ -
Creating short photo gallery using previous and next frame A3.0
I'm creating a simple photo gallery.
Can someone tell me the right code this is what I'm remember. I forgot.
next_btn.addEventListener(MouseEvent.CLICK, goNext);
previous_btn.addEventListener(MouseEvent.CLICK, goBack);
function goNext(e:MouseEvent):void {
gotoAndStop("nextFrame");
function goBack(e:MouseEvent):void {
gotoAndStop("previoudFrame");
I know it's wrong can someone help me out?
Thanksinside your functions use just
nextFrame();
and
prevFrame();
and get rid of those gotoAndStop and it should work... -
Trouble creating a MobileMe Gallery with Aperture
I'm having trouble creating a MobileMe Gallery from within Aperture. In the past it work flawlessly but now it isn't working at all. This is what happens: I create a gallery from within Aperture by clicking on either "New/MobileMe Album, or "New From Selection/MobileMe Album." The gallery is made and appears in Aperture. However, when I visit the MobileMe site the Gallery doesn't contain any images. When I sync it again the gallery disappears from within Aperture all together.
Any ideas?I resolved my problem by rebuilding the Aperture Library from the Aperture Vault. Apparently, and this makes sense, Aperture can't build a Gallery if the photo version, or photo itself is missing. I think the reason why it appeared visible is because the Preview file was embedded...
-
Creating flash photo gallery with Bridge
This may not be the best way of creating a flash gallery but
I thought I would try it since I'm new to this and it seems faster
then editing all those photos.
When I create the photo gallery using Adobe Bridge and then
try to open the Flash Movie file to edit the movie it tells me
"Cannot open a protected movie"
Does this mean that I cannot edit the movie after Bridge
creates it or is there a way around this?Welcome Alex -
Any picture you display on your site can be saved to the visitor's computer.
If you ZIP each gallery, a simple link to the zipped archive will offer the visitor
an option to save to their computer. -
Help with Photo Gallery using XML file
I am creating a photo gallery using Spry. I used the Photo Gallery Demo (Photo Gallery Version 2) on the labs.adobe.com website. I was successful in creating my site, and having the layout I want. However I would like to display a caption with each photo that is in the large view.
As this example uses XML, I updated my file to look like this:
<photos id="images">
<photo path="aff2010_01.jpg" width="263" height="350" thumbpath="aff2010_01.jpg" thumbwidth="56"
thumbheight="75" pcaption="CaptionHere01"></photo>
<photo path="aff2010_02.jpg" width="350" height="263" thumbpath="aff2010_02.jpg" thumbwidth="75"
thumbheight="56" pcaption="CaptionHere02"></photo>
<photo path="aff2010_03.jpg" width="350" height="263" thumbpath="aff2010_03.jpg" thumbwidth="75"
thumbheight="56" pcaption="CaptionHere03"></photo>
</photos>
The images when read into the main file (index.asp) show the images in the thumbnail area and display the correct image in the picture pain. Since I added the pcaption field to the XML file, how do I get it to display? The code in my index.html file looks like this:rest of the code here:
<div id="previews">
<div id="controls">
<ul id="transport">
<li><a href="#" class="previousBtn" title="Previous">Previous</a></li>
<li><a href="#" class="playBtn" title="Play/Pause" id="playLabel"><span class="playLabel">Play</span><span class="pauseLabel">Pause</span></a></li>
<li><a href="#" class="nextBtn" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbnails" spry:region="dsPhotos" class="SpryHiddenRegion">
<div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}"/></a><br /></div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/><br /> Caption: {pcaption}</div>
</div>
<p class="clear"></p>
</div>
Any help with getting the caption to display would be greatly appreciated. The Caption {pcaption} does not work, -
Is it possible to create a Photo Gallery DVD with downloadable content?
I am looking for a way to create a photo gallery, distribute it via DVD, and have the end user be able to download the photos from within the photo gallery. This would function exactly like the iPhoto web galleries, but would be distributed on DVD rather than posted to the web. Is this possible? I am looking for a way for a user to download the photos, in low res and high res, from within the DVD player.
My first suggestion is to use Apple's Pro apps (ie, DVDSP) if you plan to use this DVD commercially. You'll get far better results and you will also be able to meet nearly all of the above objectives.
If on the other hand you don't have the time to learn apple's pro apps which does have a large learning curve compared to the i-apps, and you are currently working with a shoestring budget, then you can meet at least some of these objectives within iDvd by adding your content to the Dvd rom section of the Dvd. The app that one uses to play the slideshow from this data section of the Dvd depends largely on the available apps on the host computer system having access to this data in terms of what software is available to play its content. Hope this makes sense but if not, just come on back. Good luck.
Btw ... I'll check back with you later tonight since I have a fair amount of editing to do this AM. -
Having trouble with iCloud Photo Stream on a Windows Vista 64 machine.
Having trouble with iCloud Photo Stream on a Windows Vista 64 machine. Can you tell me why Photo Stream will not stay enabled. When I reboot, it will disable not to mention that it will not get any pushed photos. Is there a 64 bit version?
Hello tw_mama,
I was looking into the issue you are experiencing and found an article that may shed some light on the subject. It's called iCloud: Account troubleshooting found here: http://support.apple.com/kb/TS3988
This section in particluar:
I get an "Unsupported Apple ID" error when I try to sign in to iCloud from my iPhone, iPad or iPod touch.
Depending on how you created your Apple ID, you may not be able to create an iCloud account with your current Apple ID. If your Apple ID works in the iTunes Store, App Store, Game Center, FaceTime, or with other Apple Services, your Apple ID should work for iCloud. Also, if you created your Apple ID while you applied for a job at jobs.apple.com, your Apple ID should work for iCloud. If you cannot use your Apple ID with any Apple Services, it might not be compatible with iCloud. Contact iCloud Support for assistance.
All the best,
Sterling -
I am having trouble on transferring photos from iPhoto to my Seagate External Hard Drive
Im new to Mac and I was doing fine with my new laptop but somewhere along the way I have reach to a point where I cant continue my work. I am having trouble on transferring photos from iPhotos to my Seagate External Hard Drive, even when the hard drive is compatable with my MacBook Air. Some how I have trouble trying to drag my photos to my drive and it is not letting me to do so. Pls. help me in my sistuation or derect me to a website that will answer my questions. I am getting really upset and frustrated; so I'm out of ideas.
even when the hard drive is compatable with my MacBook Air.
What is the file system on that drive? Is it formatted MacOS Extended (Journaled)?
And what is your iPhoto version? iPhoto 9.5.1?
Some how I have trouble trying to drag my photos to my drive and it is not letting me to do so
What exactly happens when you try to drag photos to your drive? Are you dragging from iPhoto's window to the drive?
Can you export your photos, when you select the photos on iPhoto and use the command "File > Export"? -
How can I create a photo gallery in flash cs3, Iam a beginner in flash
How can I create a photo gallery to put into my current flash site Iam creating? Using flash cs3, can anybody suggest any tutorials (noting complicated with me being new to flash cs3)
When going on line I saw that maybe you can use Dreamweaver, XML, or even Photoshop can anybody explain the difference between using one or the other?
THanksIndeed, google ftw.
For example:
+as3 photo gallery flash tutorial
reveals many including this one:
http://www.flashmagazine.com/Tutorials/detail/as3_photo_gallery/ -
Help to create a photo gallery..
Can anyone visit this site..
www.ted.com
I want to create a photo gallery like that.. I mean when i hover my mouse over a thumbnail my image should enlarge.. and if i click i should be able to download..
I want that animation while loading between my galleries..
please help me.. please.. no need that various sizes for all tiles.. no problem even if all tiles are of same size.. please.. I need it so badly..
thanks in advanceWhenever I need a gallery like this i usually just buy one
from:
http://www.flashcomponents.net/component/
they are usually like $8-10 and have saved me quite a bit of
time... there are plenty of tutorials out there for custom ones,
but for $8 its hard to pass up a pre-built... i know this doesnt
answer your question exactly but i figured i would give my 2 cents,
hope this helps :) -
Creating a photo gallery like the China Gallery in Adobe Labs. How?
I have photos in several categories (I'll use 2, "frank" and "wolfie" as examples here). What I'd like to do is build a photo gallery like the China Photo Gallery shown in the Adobe Labs site, where the user can switch between categories without going to a different page. Here's what I've done so far and how I'm stuck:
I created a photo gallery with the instructions in the tutorial "Building a photo album with the Spry Framwork". I then inserted a Tabbed Panels widget for navigating between the categories.
I set up an XML file as follows:
/* frank category */
<photo
path = "001p.png"
width = "467"
height = "467"
thumbpath = "001p.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
/* wolfie category */
<photo
path = "001f.png"
width = "467"
height = "467"
thumbpath = "001f.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
To create the div holding the thumbnails for the "frank" category, I entered the following:
<div class="thumbdiv" spry:region="dsGallery"><img src="thumbnails/frank/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery" class="thumbs" /></div>
To create the div where the full size images will be displayed, I entered the following:
<div class="mainpic" spry:detailregion="dsGallery"><img src="images/frank/{@path}" onload="MM_effectAppearFade(this, 1500, 0, 100, false)" /></div>
Then, in the tabbed panel set for the "wolfie" category, I did the same thing, substituting "wolfie" for "frank". However, since there is only one xml file, spaceholders for all of the thumbnails appear in the thumbnail div for the frank category. I realize that I'll probably need to create a separate xml file for each category, but how do I set it up so the correct xml file is accessed when the link in the tab is clicked? Or am I approaching this all wrong?
From reviewing the source for the China gallery, it appears that they set up links to different xml files instead of Tabbed Panels. How does that work? There are also some javascript files I can't find anywhere on Adobe's site.
ThanksHi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil -
What is the best way to create a photo gallery?
Hi,
I want to create a photo gallery in Dreamweaver without using any pre-built "web gallery" function. What's the best way to swap the images when I click the "next" button? Do I create a new Dreamweaver page for each photograph? Is there a more efficient way to do it than that?
Thanks,
GordonIs there a more efficient way to do it than that?
Most definitely. With scripts.
57+ Free Galleries, Slideshows & Lightbox solutions:
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
20 Best jQuery Slideshow Scripts
http://graphicalerts.com/20-best-jquery-slideshow-image-photo-gallery-plugins/
If you're a photographer or managing a large collection of images, look at JAlbum.
Download the software. Drag & Drop your images/folder of images into the work space. Hit create album. In a few seconds, jAlbum generates your HTML pages and thumbnail images for you. A real time saver with plenty of customizable skins to choose from.
Download: http://jalbum.net/software;jsessionid=qkhdjzieqjtg1rz4x2anjlk5d
Skins: http://jalbum.net/skins
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Can/How Do I Create a Photo Gallery Template in Bridge
It is possible for me to create a photo web gallery "template" in Bridge CS5. I would like it so that every time I create a photo gallery for sports photos, the header, google analytics, facebook icon, twitter icon copyright and more are all the same every time a create a photo gallery in Bridge CS5.
Sample of one of our photo pages (not done in Bridge yet).Thanks a million .
-
CS6 How to create a photo gallery?
CS6 How to create a photo Gallery?
I like Fancybox2. It's a big improvement over Lightbox & the original Fancybox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--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 image container**/
#thumbs p {
float: left;
width: 180px;
height: 12.5em;
margin: 10px 0 0 20px;
padding: 10px;
border: 1px solid silver;
/**rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align: center;
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
margin-bottom: 1.5em;
opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: ".";
clear: left;
font-size: 0px;
line-height: 0;
display: block;
visibility: hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>
<!--insert thumbnails with links to full size images below-->
<div id="thumbs"> <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5 </p>
<!--end thumbs--></div>
<!--Fancybox with Iframe-->
<h1>Fancybox with Iframe</h1>
<h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox, iframe').fancybox();
</script>
</body>
</html>
Nancy O.
Maybe you are looking for
-
Problem with credit memo and withholding tax
Please, I need your help: I have tried pay some invoice, each one does not exceed the minimum amount for Withholding Tax , but the adding of them exceed the Max Amounts for Withholding Tax Codes. For this I am using u201CBase exempt amt check a
-
After migration to new iMac - problems with Microsoft office 2008 using multiple users
I migrated my data from my old Imac to my new Imac. On the new Imac I created multiple logins for my kids. My microsoft office 2008 programs will not open. I keep getting the "Customer Experience Improvement Program" screen which cycles through, c
-
How can I import data using .dmp into the table which has more columns then in import
I am building the history for warehouse purpose on Oracle 8i database and want to use the old import (.dmp) files (from oracle 7.3.4) to import data but the underlying table is having few more columns which are not in my old DMP file .. how can I imp
-
Hi, hi, 1. Can any one please explain me At the time of transactional data uploading do we need to create .dummy G/L . What is dummy G/L a/c.How maney we have to create. 2. If yes how many dummy G/L a/c do need to create. 3. Please provide me what
-
There is no iweb folder in application support
there is no iweb folder in application support. Why?