Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

AddingJavascriptSlider

Uploaded by

didastillas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

AddingJavascriptSlider

Uploaded by

didastillas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Image Slider

Version 1.1
Adding a JavaScript Slider to a page
The agency templates are built with a front-end framework called Bootstrap. One advantage of
Bootstrap is that in the agency templates it allows content “hooked in to Bootstrap” to
accommodate mobile devices. Bootstrap components can be used without adding any
additional JavaScript or CSS to the site. The slider is one such component. This document
describes the process to add a responsive slider to a page in your agency site.

Prepare and upload images


Slider images should all be sized the same and optimized for web use (see Appendix A). All of
the images should be uploaded to a picture library in your SharePoint site.

Add a picture library


1. To add a picture library, navigate to the gear icon on the top right of the ribbon bar,
next to your sign-in name and click “Site contents.”

Figure 1 Site contents

2. If you don’t have a picture library already, click “add an app”.

Figure 2 Add an app

Page | 2
3. Select “Picture Library.”

Figure 3 Picture Library

4. Give your picture library a name with no names or spaces. This will help to generate a
cleaner URL to your images.

Figure 4 Name your library

After your library has been created, you can upload your images to the library.

Upload pictures
1. Click on the library you created and select “new document”.

Figure 5 New document

Page | 3
Figure 6 Add a picture file chooser

2. Use the Add a picture file chooser to locate and upload an image.
3. Complete the picture properties form, adding a title, and keywords if needed, and save.

Figure 7 Picture properties form

4. Repeat steps for as many images that you need to rotate in your slider.

Gather image links


Before you can configure the slider, you will need the URL for each image that will appear in
your slider. Make a list of the URLs in Notepad or Word:
1. In the list view of the picture library, right-click on the title of an image and select “open
image in new tab.” When the image opens in a new tab, the browser address field will
contain the correct path to the image, which you will need to for your Bootstrap HTML.

Page | 4
2. Copy the address in the browser address bar and save it in your document.
Example: /WOWSlider/data1/images/_w/retro_robot3_jpg.jpg

Copy the HTML code from Bootstrap


Now you’re ready to get the Bootstrap slider code and start configuring it. No additional
JavaScript or CSS is needed; only the HTML for the slider needs to be added to the page.
1. In your browser, go to https://getbootstrap.com/docs/3.3/javascript/#carousel

2. Navigate to the Carousel section and locate the slider HTML, which will look similar to
the example below.

Page | 5
Figure 8 Slider html and Copy button

3. Copy and paste the HTML for the slider by either highlighting the code or use the copy
button on the top right.

4. Navigate to the page you would like to insert a slider. From the ribbon, click on
the gear icon and select “Edit page.”

Page | 6
Figure 9 Edit page menu item

5. Click an area within the page where you would like to add the slider and navigate to the
“Insert” tab in the SharePoint ribbon and select “Embed Code.”

Figure 10 Embed Code icon in SharePoint ribbon

Page | 7
6. Copy and paste the Bootstrap html code and update the image paths to the images
uploaded in your library.

Figure 11 Editing image paths in html

Your image slider should now look like this. The slider can always be updated by clicking the
“edit snippet” link on the bottom right of the slider.

Page | 8
Appendix A: Sizing and Optimizing Images
Preparing an image to be used online requires selecting the right size, file format, and image
resolution. Whether you repurpose some graphics that you previously used with your offline
marketing efforts or if you have new images you would like to prepare for use on your website,
there are a few web graphic best practices you should follow.

Choosing a file type


.jpg is the file format for optimized photographs. Most tools that allow you to export or save as
.jpg files (also called a JPEG) will allow you to adjust a quality setting that will balance the quality
of the image versus the file size. Export your images using different settings to find the best
looking image at the lowest size. An overly compressed .jpg file will be identified by different
sized colored rectangles appearing within the colors of the photograph (pixilation), normally in
larger fields of the same color. Avoid using this file format for graphics that are large flat colors
(like many logos) as they will never look as good as they will with the other options.

.png is the file format for transparent images. Saving files as PNGs has two options—8 or 24 bit.
For semi-transparent images, you must use 24 bit. If your image has only a handful of colors you
can select the 8-bit version to save a little file size without it affecting the quality of the image.

File size and resolution


File size refers to how much space a file, in this case an image, takes up on a hard drive. Smaller
file sizes are better for web graphics as they will allow the website they appear on to load more
quickly. This is still important for many of the people who are accessing the web from a slower
internet connection, an old computer, or their phone. The trick is that as the file size decreases,
so does the quality. You will want to find the best middle ground between quality and file size.

Reducing the resolution is one way to drastically decrease file size without decreasing the
quality of the image on the screen. Resolution is a measurement of how dense an image is. It is
measured in DPI or dots per inch. It is a legacy term from the world of print. For printed images,
you want very dense graphics that are normally above 300dpi but can go up to 1200dpi.

Most computer monitors will only display at 72dpi. This means that any resolution higher than
that is not adding anything to the quality of the image, but is rather just increasing the file size.
So a 300dpi image and a 72dpi version of the same image will look exactly the same on the
screen, but the 300dpi one will be over four times larger in file size.

Make sure you can legally use an image


Although it is super easy to find images on the Internet, that does not mean that you are
allowed to legally use these images. Using a standard Google image search, or simply
downloading and using images from any random source on the web, can easily land you in legal
and financial trouble. Make sure you have written permission from the photographer that gives
you the rights to use the image or download images from a royalty free image library like
www.istockphoto.com.

Page | 9

You might also like