Photo-slideshow

The SuperSized Slideshow located in the photo-slideshow.htm page is a fantastic full screen slideshow component.

Instructions

Photo-slideshow

The SuperSized Slideshow located in the photo-slideshow.htm page is a fantastic full screen slideshow component. This is one of the rare component pages that isn’t actually ‘themed’. The entire page is dedicated to the slideshow component. The only other component we’ve included is the top menu, so you’re visitors will be able to navigate to other pages in your site without needing to press the back button in their web browser.

In this tutorial, we’ll demonstrate how to update the SuperSized Slideshow on the photo-slideshow.htm page. This is a very unique type of component as everything you’ll be updating is located in the ( photo-slideshow.htm ) itself. No Library pages. You could take this page and it’s Library folder and transplant is directly into another website.

There are very few updates you’ll need to actually ‘do’ in order to get the slideshow working with your own images. Basically ‘link’ your own image into the slideshow, then change the ‘title’ or Image Credit as you would see in our demo. You can alter much of the functionality though if you’re not afraid of diving into the HTML. All the functionality is commented, so just a matter of adjusting a number, experiment as much as you dare!

In this tutorial we’ll focus on adding and removing images, and updating the captions. Tweaking the functionality can be done by viewing the ‘code’ of the photo-slideshow.htm and reading the comments for each function.

Replacing images

The first thing you’ll need to do is locate and resize your replacement images. The images in the Photo-slidehow are full screen. They will resize to the full width and height or monitor resolution. To give your visitors the best possible experience we’ve determined the ‘optimal’ width and height for your images to be:

  • 1600 pixels (width)
  • 1200 pixels (height)

Or 1600×1200 pixels. You can resize your images using your favorite image editor, or just upload to ( www.pixlr.com ) and resize your pics online, for free!

You can use jpg or png, but jpg will yield a better or lower file size than png. A 80% quality setting will result in a moderate file size ( for most images ) and offer better quality. File size depends on image quality as well as depth of color, more colors = larger file size.

Keep in mind, when using images on the web, you’ll want to follow the ‘rules’ for naming images or any file for that matter:

  • all lower case, lower case also applies to the images file extension ( .jpg vs .JPG )
  • letters and numbers only
  • connect multiple words with a hyphen or underscrore ( hyphen-or_underscore )
  • image quality settings of 60 – 80% for best results, and file size

Once you’ve resized your replacement images, import them into the:

Library / sliders / supersized-slideshow / images / (folder) … of your website.

We recommend you import the images into the same folder as the default, this way it will be easier to link the new images into the photo-slideshow.htm page. You can import your replacement images into any folder in your website, just be careful to update the ‘path’ to the image in the next steps.

In the following steps we’re going to demonstrate how to add, replace and remove images.

Replace images:

  1. With your replacement images imported into your website, open the photo-slideshow.htm page.
  2. Switch to ‘Code’ view.
  3. Scroll down about half way and you’ll see the default images listed with an {image : ‘Library… } tag.
  4. There are 10 images in the slideshow to start with, but you can add and remove as needed. To replace the first image in the slideshow with your own, select “supersized1.jpg” with your mouse:
  5. Type the name of your first image in it’s place:
  6. Now scroll the page over to the ‘right’ and update the same link for the “thumb”:
  7. The image and the thumb share the same image, so the link will be the same for both. You just need to update the link in both places.
  8. While you’re at it, you can also update the ‘Title’:
  9. Just be careful to change the text ‘BETWEEN’ the single quotes, and not remove the ‘ quotes ‘ themselves.
  10. If you want to link your new image to a page in your website, or an external website, scroll back over to the right, and update the link:
  11. If you’ve imported the images into the Library / sliders / supersized-slideshow / images / (folder) as recommended, you’ll only need to change the name of the image in the link, if you’ve place the images somewhere else in your website, you’ll need to update the entire path.

Adding images

  1. With your replacement images imported into your website, open the photo-slideshow.htm page.
  2. Switch to ‘Code’ view.
  3. Scroll down about half way and you’ll see the default images listed with an {image : ‘Library… } tag.
  4. To add a new image, select the entire {image : .. } line:
  5. Right click on the selected line of code and Copy:
  6. Place the cursor on the page ‘after’ the last {image : .. } line:
  7. Then right click and Paste or ( Ctrl+V):
  8. Paste once for each additional image you’d like to add.
  9. Once you’ve pasted enough lines to equal the number of images you’ll be using in the slideshow, you can then go through each line and update the image links, titles, and web pages links.

Updating the Title ( Image Credit ):

  1. Select the text ‘BETWEEN’ the single quotes ‘Image Credit: Super-sized 2′ ( for example ), and type in a new title.

Updating the photo link:

  1. If you want to link your photo to a page in your website ( or an external site ) just update the link at the end of the {image…  } tag to link to your new page.

Photo-slideshow

The SuperSized Slideshow located in the photo-slideshow.htm page is a fantastic full screen slideshow component. This is one of the rare component pages that isn’t actually ‘themed’. The entire page is dedicated to the slideshow component. The only other component we’ve included is the top menu, so you’re visitors will be able to navigate to other pages in your site without needing to press the back button in their web browser.

In this tutorial, we’ll demonstrate how to update the SuperSized Slideshow on the photo-slideshow.htm page. This is a very unique type of component as everything you’ll be updating is located in the ( photo-slideshow.htm ) itself. No Library pages. You could take this page and it’s Library folder and transplant is directly into another website.

There are very few updates you’ll need to actually ‘do’ in order to get the slideshow working with your own images. Basically ‘link’ your own image into the slideshow, then change the ‘title’ or Image Credit as you would see in our demo. You can alter much of the functionality though if you’re not afraid of diving into the HTML. All the functionality is commented, so just a matter of adjusting a number, experiment as much as you dare!

In this tutorial we’ll focus on adding and removing images, and updating the captions. Tweaking the functionality can be done by viewing the ‘code’ of the photo-slideshow.htm and reading the comments for each function.

Replacing images

The first thing you’ll need to do is locate and resize your replacement images. The images in the Photo-slidehow are full screen. They will resize to the full width and height or monitor resolution. To give your visitors the best possible experience we’ve determined the ‘optimal’ width and height for your images to be:

  • 1600 pixels (width)
  • 1200 pixels (height)

Or 1600×1200 pixels. You can resize your images using your favorite image editor, or just upload to ( www.pixlr.com ) and resize your pics online, for free!

You can use jpg or png, but jpg will yield a better or lower file size than png. A 80% quality setting will result in a moderate file size ( for most images ) and offer better quality. File size depends on image quality as well as depth of color, more colors = larger file size.

Keep in mind, when using images on the web, you’ll want to follow the ‘rules’ for naming images or any file for that matter:

  • all lower case, lower case also applies to the images file extension ( .jpg vs .JPG )
  • letters and numbers only
  • connect multiple words with a hyphen or underscrore ( hyphen-or_underscore )
  • image quality settings of 60 – 80% for best results, and file size

Once you’ve resized your replacement images, import them into the:

Library / sliders / supersized-slideshow / images / (folder) … of your website.

We recommend you import the images into the same folder as the default, this way it will be easier to link the new images into the photo-slideshow.htm page. You can import your replacement images into any folder in your website, just be careful to update the ‘path’ to the image in the next steps.

In the following steps we’re going to demonstrate how to add, replace and remove images.

Replace images:

  1. With your replacement images imported into your website, open the photo-slideshow.htm page.
  2. Switch to ‘Code’ view.
  3. You may wish to turn the ‘code wrapping’ OFF for now, as it may be easier to read the page.
  4. To turn Code Wrapping ‘OFF’ in Dreamweaver, click on the ‘View’ menu, ‘Code View Options’, then uncheck the ‘Word Wrap’ option:
  5. Scroll down about half way and you’ll see the default images listed with an {image : ‘Library… } tag.
  6. There are 10 images in the slideshow to start with, but you can add and remove as needed. To replace the first image in the slideshow with your own, select “supersized1.jpg” with your mouse:
  7. Type the name of your first image in it’s place:
  8. Now scroll the page over to the ‘right’ and update the same link for the “thumb”:
  9. The image and the thumb share the same image, so the link will be the same for both. You just need to update the link in both places.
  10. While you’re at it, you can also update the ‘Title’:
  11. Just be careful to change the text ‘BETWEEN’ the single quotes, and not remove the ‘ quotes ‘ themselves.
  12. If you want to link your new image to a page in your website, or an external website, scroll back over to the right, and update the link:
  13. If you’ve imported the images into the Library / sliders / supersized-slideshow / images / (folder) as recommended, you’ll only need to change the name of the image in the link, if you’ve place the images somewhere else in your website, you’ll need to update the entire path.

Adding images

  1. With your replacement images imported into your website, open the photo-slideshow.htm page.
  2. Switch to ‘Code’ view.
  3. Scroll down about half way and you’ll see the default images listed with an {image : ‘Library… } tag.
  4. To add a new image, select the entire {image : .. } line:
  5. Right click on the selected line of code and Copy:
  6. Place the cursor on the page ‘after’ the last {image : .. } line:
  7. Then right click and Paste or ( Ctrl+V):
  8. Paste once for each additional image you’d like to add.
  9. Once you’ve pasted enough lines to equal the number of images you’ll be using in the slideshow, you can then go through each line and update the image links, titles, and web pages links.

Updating the Title ( Image Credit ):

  1. Select the text ‘BETWEEN’ the single quotes ‘Image Credit: Super-sized 2′ ( for example ), and type in a new title.

Updating the photo link:

  1. If you want to link your photo to a page in your website ( or an external site ) just update the link at the end of the {image…  } tag to link to your new page.