V2 Contact Page, Image Sliders, and Plugins « My Site/Blog
Untitled Document

V2 Contact Page, Image Sliders, and Plugins

I’ll start by talking about the specific image sliders I used for v2. The first, as I mentioned in the previous post, is the eislideshow jQuery plugin¬†which is featured on the homepage and photography page. You don’t need to know anything about jQuery or javascript or anything fancy to use the plugin. All you do is add the eislider css files to your css folder (and obviously include them on your page), and then copy a little javascript provided in an example. The following is code from the photography page:

Screen Shot 2013-05-25 at 5.31.10 PM

As you can see, there really isn’t much to it. the slideshow_interval is fairly obvious, autoplay is on, and the transition animation is centered. I didn’t need to write any of the code, I didn’t need to know how it worked, I just copy/pasted it into my website and integrated a great looking slider. The following is the html format for the slider:

Screen Shot 2013-05-25 at 5.34.44 PM

The height/width of the image can be changed in the css files of the slider to the height and width of your image. All the ids and classes are what the plugin uses by default and can be changed if desired (make sure to change your css to match). Each slide is then held in a list item containing the image source, with an option for thumbnails in the other empty list. I prefer the slider without thumbs so I leave it empty. That’s how you integrate an eislideshow into your webpage! It’s really that easy. You could just go ahead and copy all of the code I have shown here, link to images that are 1280 pixels by 640 and you’d be done.

The other slideshow on the projects page is called the s3slider and is also a jQuery slider. If you follow that link to their website the have examples right there telling and showing you how easy it is to use. I won’t bother to go into the same detail as the eislider, but if you get stuck try looking at some other examples and see if you can work it out on your own.

This is probably a good time for me to mention the firebug plugin for firefox/chrome, which allows you to examine the html and css of a webpage. Once it’s installed all you have to do is right click and select “inspect element” to view a page’s source code. You can then break down the formatting and styling of a page to see how someone accomplished a certain look or feature that you may want to put in your own site. This is also a great way to learn if you can’t find good examples using google. Firebug is also a great tool for debugging your site if things aren’t displaying as they should. Its use played a critical role in the development of the current site and I highly recommend it.

The Contact Page

This page was created more as a gimmick than being useful. I was on youtube and stumbled across a video on how to create your own php contact form with validation, and I thought it would make a nifty addition to my site. Truthfully I was never a fan as I couldn’t style it the way I wanted to (again, another reason to learn the basics and not just copy code) and it wasn’t terribly useful. Here is a picture of what it sort of looked like (it’s not currently online so I can’t get a picture of the actual page)

contact form

It consisted of three basic fields: name, email, and message. Each was validated meaning you had to put something in for name, the email address had to have a valid format, at the message itself couldn’t be blank. If a user filled out all of the fields and clicked the submit button, the server would forward the message to a provided email address. It is much easier to have a contact link with the href=”mailto:someemail@something.com”, which will open up a new window with the recipient address already filled in. I opted for this when designing the current site so feel free to check it out now.

The purpose of this post is to hopefully show you how easy it can be to integrate a plugin to your website. If you want a slideshow, google “html slideshow plugins” for example and pick whichever one you like the most. It doesn’t just have to be a slideshow plugin, it can be anything from a contact form, video player, or even video game. Just spend some time looking at whatever documentation is provided, and see if you can figure out how to get it working. The other purpose of this post is to make note of the importance of reading over and learning code as opposed to just copying and pasting. Plugins are simple and can be centerpieces on many of your pages however, it it important to make sure you understand how they work and what you can tweak. If you find the perfect plugin for your site but can’t make it larger than the 100 pixel wide demo you were given, then it’s not much use.

Untitled Document

no comments

leave a response

Untitled Document