Adding icons and styles to the zoom and contact links
Video: Adding icons and styles to the zoom and contact linksNow we're going to add a hyperlink down for the contact section. Let's get our cursor down in here. We had put that default text in the beginning inside of the div.gallery_contact. Let's come in here and type 'Contact Me'. Let's select that. Down in the Properties panel, under the Link field, we're going to make this a hyperlink that will initiate a mail to: address. So we're going to type mailto, colon. Then you can put in your email, address firstname.lastname@example.org, hit Return.
Viewers: in countries Watching now:
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links
Adding icons and styles to the zoom and contact links
Now we're going to add a hyperlink down for the contact section. Let's get our cursor down in here. We had put that default text in the beginning inside of the div.gallery_contact. Let's come in here and type 'Contact Me'. Let's select that. Down in the Properties panel, under the Link field, we're going to make this a hyperlink that will initiate a mail to: address. So we're going to type mailto, colon. Then you can put in your email, address email@example.com, hit Return.
That will create a hyperlink. Over on the right-hand side, we had that default text in for where the caption goes. Let's just delete that text. So with a hyperlink created on the left, let's come over to our CSS Styles. Let's go to new hyperlink style, Compound path. We're going to say a.contactlink. This is going to be a brand-new class. We'll assign it into the anchor tag in a moment. Let's choose OK. The Properties, we're going to pick in here.
Color, we're going to set to white. Text-Transform, all uppercase. No Text-decoration. Under the Box model, let's come under Padding. Let's turn off Same for all. We're going to set 0 on the Top, 30 pixels on the Right. This is going to keep the type inside the anchor tag 30 pixels from the right-hand side where we're actually going to position that envelope. 0 on the Bottom, 0 on the left, 0 for Margin.
Lastly, let's come into Background. For Background image, we're going to choose Browse. Let's go into our template directory inside of images directory. We're going to grab the link_email. Click Choose. Background-repeat: we're going to say no-repeat. On the X, we're going to align it to the right, and we're going to set 0 on the Y axis. Click OK. Now in order to assign this here, I'm going to get a few characters inside of the link here. I'm going to come down to the document structure, click on the anchor tag to select the whole thing.
I'm going to come down to the Class declaration inside of the Properties panel and select contactlink. Now what's interesting here is Dreamweaver doesn't actually preview this properly, but if we come up here and hit Live view and scroll down, we'll see the envelope showing up on the right-hand side here. Let's come out of the Live view. Now, we're on the right-hand side where the caption is. We actually have those inside of a p tag. So let's come over here to New CSS Rule, and create a regular tag.
Let's come down to select the p tag. Click OK. Font color, let's pick a medium gray. Box property, Margins, 0 on the Top, 0 on the Right, 12 on the Bottom, 0 on the left. Click OK. Let's create one more rule, a compound rule. This is going to be the zoom link. Let's type a.zoom. Click OK.
Color is going to be white. Text-decoration is none. Box properties, Padding, 0 on the Top, 0 on the Right. We're going to put 5 on the Bottom because height of the zoom actually needs a little bit more room below for the handle of that graphic. 20 on the Left. Set 0s on the Margin. Next, let's go to Background. We'll click Browse. We'll choose link_zoom. Click Choose.
So let me select this and hit Copy. We're also going to add it to the link down here, the overalylink, the text-based one that is inside the initialization area as well. Let's click Save on the gallery. Let's go back to Dreamweaver. Let's choose Save All, Option+F12, load in a browser, hit Reload. Now, I can see my styles down here. CONTACT ME highlights links to firstname.lastname@example.org.
If I click this, it'll load this up in an email client. View larger has a little magnifying glass. We have our gray type down here. So as I click, we can see the type opening and closing. Well, this concludes all of the functionality for the interactive gallery. In the next movie, we'll talk about a few things you might want to consider for extending the capabilities of this particular project.
Find answers to the most frequently asked questions about Create an Interactive Photo Gallery with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
- Q: The finished state of the interactive photo gallery in this course shows a clickable preview. When you click on the preview image, or on the view larger icon, a larger lightbox image appears. Chris's example has a close button and border surronding the large image, but mine doesn't. Did I miss a step?
- A: The functionality you describe is part of FancyBox plug-in we use in this course. It's a custom lightbox tool, which I've included in the exercise files and also available for download at fancybox.net. It's free and highly customizable.
By default, FancyBox adds a border to images (at least in the version of FancyBox we're using), but there are many options that can be turned on when you set up your fancybox initialization script, including the close button, which is invoked using the showCloseButton property. This is all covered in the "Creating a custom function for lightbox properties" movie.
If you want to customize your gallery further, look at the list of the customizable properties at http://fancybox.net/api.
- Q: This course was updated in April, 2013. What changed?
- A: Since the release of this course, Internet Explorer 9 and 10 have been released, and sometimes these browsers do not activate interactive HTML content. To remedy this problem, the author has added a movie to Chapter 10 that will show you how to:
- Update the HTML to HTML5
- Update the version of jQuery
- Use the Google html5shiv to keep compatibility with Internet Explorer 7 & 8
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.