VBCPS Global Announcements System
Contents
1. Gptioninis B E Caption URL The above image displays the fields you will be able to fill out For the purposes of the image rotator web part we are only concerned with the custom fields indicated above Picture URL Type any URL into this field if you would like the actual image to be clickable navigate elsewhere onclick Caption Title Type a title for your caption if you are attaching a caption to this image Caption Info Type the text that you want to appear under the caption title on the image Caption URL Type any URL into this field if you want the caption title to be clickable navigate elsewhere onclick Once all desired information has been entered click the save button mE Page 7 of 18 Now that we have an image in our rotating image library we can place the web part on our SharePoint page First we will need to put the page into edit mode Site Actions gt Edit Page mo esl NT er At Verdana apt B Copy inis BLL she xe x f aboard Fort Then click Web Part ste Adioni Br Page Bj amp e Table Picture Videoand Link Upload Reusable Web Exsting New ble Nie Vico Unk upped Brune Mee Petro gr Tables Media Links Content Parts About the Web Part Page 8 of 18 TCSC 3525 Huguenot Rd Midlothian VA 23113 Once you click Web Part you will see new options appear below the ribbon2. On the far left will be a section called Categories You will highlight TCSC Web Parts and then highlight TCSC Custom Image Rotator About the Web Part After you have highlighted TCSC Custom Image Rotator click the add button it will be to the right gt ei At this point we have successfully placed the image rotator onto our page Now we need to configure it TCSC Custom Image Rotator Please Configure this Web Fart Page of 18 TCSC 3525 Hug VA2813 G THE IMAGE ROTAT Make sure your page is still in edit mode don t click the save and close button in the ribbon If your page is no longer in edit mode follow the instructions at the beginning of the Adding the image rotator web part to a page section With the page in edit mode click the dropdown arrow on the web part and select Edit Web part TCSC Custom Image Rotator n X Delete bj Ede wen Pare AN um Bob rngesuin This will bring up the web part properties tab We will be looking at the TCSC Custom Properties and Available Picture Library sections in this tab as the rest are out of the box SharePoint properties aT n _ a ex romel cones anov The image rotator web part traverses through the site collection you are in and returns the picture libraries in that site collection The drop down menu in the Available Picture Libraries section displays those returned lib
3. properties box closes you will need to click the Save and Close button on the ribbon and then follow the normal publishing procedure Brusse vA y E Libraries ee Students TCSC Custom YouTube Player Page 17 of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113 WEB PART LIMITATIONS Only one instance of the image rotator and one instance of the YouTube player web parts can exist on a page In other words you can have one image rotator and one YouTube player per page More than one instance of each per page will cause issues Page 18 of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113
4. TCSC The Computer Solution Company Albemarle County Public Schools Image Rotator YouTube Player July 17 2012 Revision History 1 0 Bryan Hackne 07 17 2012 Usage Guide Page 2 of 18 uguenot Rd Midlothian VA 23113 Table of Contents OVERVIEW IMAGE ROTATOR SETTING UP THE ROTATING IMAGE LIBRARY IMAGE ROTATOR ADDING THE IMAGE ROTATOR WEB PART TO A PAGE IMAGE ROTATOR CONFIGURING THE IMAGE ROTATOR WEB PART YOUTUBE PLAYER ADDING THE YOUTUBE PLAYER WEB PART TO A PAGE YOUTUBE PLAYER CONFIGURING THE YOUTUBE PLAYER WEB PART WEB PART LIMITATIONS Page 3 of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113 image Rotator Web Part The image rotator web part allows users to choose any picture library in a given site collection and rotate those images in the browser Features include ability to customize width and height pause on hover toggle directional arrows build navigation boxes clickable images captions and clickable caption titles YouTube Player Web Part The YouTube Player web part allows a user to grab a YouTube URL and embed that video on the page The YouTube Player web part retains all attributes of the original YouTube video such as full screen viewing Page 4 of 18 TGC TATOR SETTING U Before using the image rotator we need to create an image rotator picture library Site Sett
5. e configure iie This will bring up the web part properties tab We will be looking at the TCSC Custom Properties section in this tab as the rest are out of the box SharePoint properties SESE Cuctom YouTube Player x Tope Page 15 of 18 VA2813 Click the plus symbol on the TCSC Custom Properties section to display the available configuration options TCSC Custom Properties Custom Width Custom Height En Defaut size Video URL The above image shows the custom properties available for configuration Default Size c This is checked by default The default size is 500 width by 279 height in pixels o ff you want to specify a custom width and height you will need to uncheck this option Custom Width If default size is not checked you can type a custom width into this field in pixels Custom Height c If default size is not checked you can type a custom height into this field in pixels e Video URL Place the URL of the YouTube video you want displayed This web part will ONLY read the base URL found in the address bar when you click on a video o EY CTT TY N Yu D a E ee Welcome to Albemarle County Public Schools After choosing the desired configurations click Apply and then OK SharePoint will not display the changes without these post backs 2 page refreshes to display changes Page 16 of 1 TCSC 1525 Huguenot Rd Midlothian VA 23113 Once the web part
6. ings gt More Options Sonos Sd Dexter oma nes RN sar M Rut Sher pes d vages JR Seale af Nean PEL Select Rotating Image Library from the libraries section Without Silverlight Installed j Rotating Image Library a Libraries T Asset brary rain maze tiary R Page S of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113 Name the library whatever you choose If you want the library to appear in the quick launch section left n then select the Yes radio button If not then select the No radio button Description VW Display ttis picture ibrary on the Quick Launch Yes No Once these options are configured click the Create button at the bottom of this page C At this point our library has been created and ready to use Now we need to upload images into the library Navigate to the picture library Once in the library click the upload button click either the button or the drop down arrow Actions TM m areare ro pes If the drop down arrow was clicked click Upload Picture This will bring up a box that asks you to browse to the image you want to upload Once you have selected the desired image you will be presented with a form that will allow you to add properties to that image Page Gof 18 TEC Juguenot Rd M hian VA 23113 ete paure Taten Sesion vo MET aci opos
7. o aboard Font Then click Web Part Actions Page Publish Insert Sm a en Tabie Picture Videoand Link Uplod Reusable Resting New e Me Mauger ee Contents ter Tables Media Links Content Ree rar About the Web Part Page 13 of 18 TCSC 3525 Huguenot Rd Midlothian VA 23113 Once you click Web Part you will see new options appear below the ribbon On the far left will be a section called Categories You will highlight TCSC Web Parts and then highlight TCSC Custom YouTube Player Categories Web Parts About the Web Part mmo TES coon You Pane TSG custom Yourut meum N After you have highlighted TCSC Custom YouTube Player click the add button it will be to the right 3 At this point we have successfully placed the YouTube player onto our page Now we need to configure it TCSC Custom YouTube Player Please Configure this Web Part Page 14 of 18 TCSC 1525 Huguenot Rd Midi hian VA 23113 YOUTUBE PLAYER NFIGURING THE YOUTUBE PLAYER Make sure your page is still in edit mode don t click the save and close button in the ribbon If your page is no longer in edit mode follow the instructions at the beginning of the Adding the image rotator web part to a page section With the page in edit mode click the dropdown arrow on the web part and select Edit Web part TCSC Custom YouTube Player Bess
8. raries You will select the appropriate library From the image above you will see that we are using the Test Rotate library we created earlier The bulk of the configurations are found in the TCSC Custom Properties section Click the plus symbol on this section to display the available configuration options Page 10 of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113 TCSC Custom Image Rotator X Fl Aopearance FI Layout Fl Advances E TCSC Custom Proparice Default Size Custer Vide 5 Custom Height JE Ado Pay V Bab arous E Toacle Arrows Enable Build Arrows E Baile Navigation Tabs JE Start Stop sutton E Pause On Hover Available Picture Libraries Fes fate cance apply The above image shows the custom properties available for configuration Default Size c This is checked by default The default size is 500 width by 279 height in pixels o Ifyou want to specify a custom width and height you will need to uncheck this option Custom Width default size is not checked you can type a custom width into this field in pixels Custom Height If default size is not checked you can type a custom height into this field in pixels Auto Play c If this option is checked images will begin rotating on page load Uncheck this option if you do not want the images to rotate on page load Build Arrows Check this option if you want the web pa
9. rt to build the left and right navigation arrows Toggle Arrows must enable Build Arrows to use this option If this option is checked the left and right navigation arrows will only appear on hover Build Navigation Tabs Page 11 of 18 TCSC 3525 Huguenot Rd Mi hian VA 23113 c This will build navigation placeholders for all pictures being rotated allow a user to jump around to different images Start Stop Button c This will build a start stop button which will enable a user to begin or end the slide show rotation at will Pause on Hover c This will pause the slide show when a user hovers over the image The slide show will resume 15 seconds after the user moves their mouse off of the image After selec ig the appropriate library and choosing the desired configurations click Apply and then OK SharePoint will not display the changes without these post backs 2 page refreshes to display changes Once the web part properties box closes you will need to click the Save and Close button on the ribbon and then follow the normal publishing procedure see p VOR ma TCSC Custom Image Rotator E Page 12 of 18 TCSC 1525 Huguenot Rd Midlothian VA 23113 First we will need to put the page into edit mode Site Actions gt Edit Page Em Lp el E In the ribbon click Insert Format Text AOE Verdana apt Ba Cony unio Bt abe xc a
Download Pdf Manuals
Related Search