HTML - Image Carousel

{"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"none","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false}

{"IsVertical":false,"DisplayHomeLink":true,"HomeLinkText":"","HomeLinkURL":"","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"Global Horizontal Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

{"ShowBreadcrumb":true,"IsDateTitleVisible":false,"IsBreadcrumbDateVisible":false,"ShowBookmarkIcon":false,"BookmarkIconURL":"","ShowComments":false,"IncludeCommentHyperLink":true,"ShowStructureLink":false,"StructureLinkUrl":"/applications/SiteContent.aspx","ShowUserProfileDetails":false,"ShowMyContentDetails":true,"ShowSearch":false,"UserProfileBreadcrumbBarOption":null,"ShowPublish":false,"ShowLibrary":false,"ManageCMSLink":"/applications/SiteContent.aspx?index","ManageFilesLink":"/applications/SiteContent.aspx?index","LinkSecurityEnabled":false,"ReadAccessToPublish":true,"DenyAccessToPublish":false,"ReadAccessToLibrary":true,"DenyAccessToLibrary":false,"ExternalLinkForPublish":false,"ExternalLinkForLibrary":false,"MyContentBreadcrumbBarOption":{"IsMyFormsVisible":false,"IsMyEventsVisible":false,"IsMyPagesVisible":true,"IsMustReadVisible":false,"IsMyFilesVisible":true,"IsMyContentVisible":false,"IsAssignNotificationsVisible":false,"IsManageMyNotificationsLinkVisible":false,"IsAnonymous":true,"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false},"InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":null,"IsAppDisabled":false}

{"BreadcrumbEntities":[{"breadcrumbEntityLink":"Home","breadcrumbEntityLinkURL":"/","breadcrumbEntityType":"","breadcrumbEntityLinkPartial":"","isCustomCrumb":true},{"breadcrumbEntityLink":"Apps","breadcrumbEntityLinkURL":"/applications/","breadcrumbEntityType":"IntranetDASHBOARD.Core.Subsite, Core","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"iD CMS","breadcrumbEntityLinkURL":"/applications/sitecontent.aspx","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiCategory, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"Components","breadcrumbEntityLinkURL":"/applications/Components/","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiCategory, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false},{"breadcrumbEntityLink":"HTML - Image Carousel","breadcrumbEntityLinkURL":"/applications/Components/htmlcomponent-imagecarousel.html/","breadcrumbEntityType":"IntranetDASHBOARD.idWiki.WikiPage, WIKI","breadcrumbEntityLinkPartial":"","isCustomCrumb":false}],"DateToBeDisplayedAs":"Tuesday, 16 April","BreadcrumbDate":"","DateTitleURL":"","ApplicationName":[],"UserManagerDetails":"","CommentsText":"Comments","NumberOfComments":0,"UserProfileBreadcrumbBarOutput":null,"MyContentBreadcrumbBarOutput":{"MyForms":"","MyFormsURL":"","MyEvents":"","MyEventsURL":"","MustRead":"","MustReadURL":"","ManageMyNotificationsLink":"","ManageMyNotificationsLinkURL":"/applications/Notifications/default.aspx#jqTabs-3","MyContentURL":"","MyPagesURL":"/applications/mypages.aspx","MyFilesURL":"/applications/myfiles.aspx","UsersFullName":"Anonymous "}}

{"IsVertical":true,"DisplayHomeLink":true,"HomeLinkText":"iD Applications","HomeLinkURL":"/applications","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"Applications V Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

{"IsVertical":true,"DisplayHomeLink":true,"HomeLinkText":"System Admin","HomeLinkURL":"/systemadmin","VerticalBarBehavior":"Default","NavCompulsoryLinkPosition":false,"SaveExpandedNavItems":false,"SetHorizontalNavTabsActive":false,"Title":"System Admin V Nav","InSiteHeader":false,"IsEmptyControl":false,"ComponentEditMode":"","IsDeniedAccess":false,"AppName":"Nav Editor","IsAppDisabled":false}

HTML Component

Inserting an image carousel

While great content is always going to be the most important factor in keeping users engaged in your intranet, adding exciting visual and interactive functionality can also increase your users' overall experience and push underrated pages into the spotlight.

Imagine your boss wants to display high-resolution imagery from a recent sales expo and have the images slide smoothly onto the screen. Just insert iD's HTML component and import the necessary Lightbox code. Next, your boss requests that the images are displayed on the intranet homepage in a carousel style. The HTML component comes to the rescue again by allowing you to import blocks of HTML, CSS, Javascript, Flash and even web applications with a few clicks.

This page explains the following:

Inserting an image carousel
Customizing an image carousel

Step by step instructions

Create a new page on the Front End of your intranet
Select Insert from the top menu and select the Publishing tab
Select and drag the HTML component into position
Now we will insert the HTML and Jquery code into the newly created HTML component; Click here to download full HTML Code (Note: the imagery and button graphics should be uploaded to a server and should be referenced in the [path])
Paste the code directly into the HTML component
Click OK to continue and save
Once you view the Live page, the image carousel will appear where the HTML component was dragged into position

Customizing an image carousel

Now that you've added some HTML content, you may want to customize the image carousel with your own imagery and button graphics.

Changing the imagery

The image carousel code uses imagery which is 700px in width and 180px in height. If you wish to change these dimensions, you will need to modify the CSS and JQuery code.

The images themselves can be changed by modifying the "src" reference in the "slides" id. Also, you can alter the amount of images by adding or removing the "<li>" list items.

<div id="slides">

                <ul>

                    <li><a href="test.html"><img src="http://client.dv.adweb.com.au/intranet/slider_image_01.jpg" alt="scenery1" width="700" height="180" /></a></li>

                    <li><a href="test.html"><img src="http://client.dv.adweb.com.au/intranet/slider_image_02.jpg" alt="scenery2" width="700" height="180" /></a></li>

                    <li><a href="test.html"><img src="http://client.dv.adweb.com.au/intranet/slider_image_03.jpg" alt="scenery3" width="700" height="180" /></a></li>

                    <li><a href="test.html"><img src="http://client.dv.adweb.com.au/intranet/slider_image_04.jpg" alt="scenery4" width="700" height="180" /></a></li>

                </ul>

            </div>

Changing the buttons

The next and previous buttons can be updated by altering the "background-image" url reference in the stylesheet.

    /* Styling for prev and next buttons */

    .leftButton {z-index:5;position:absolute;cursor:hand;cursor:pointer;width:34px;height:34px;margin:72px 0 0 10px;background-image:url('http://client.dv.adweb.com.au/intranet/control_left.png');}

    .rightButton {position:absolute;z-index:5;cursor:hand;cursor:pointer;width:34px;height:34px;margin:72px 0 0 654px;background-image:url('http://client.dv.adweb.com.au/intranet/control_right.png');}

Legacy IE6 gif buttons can be changed in the following section.



Curved edges

A curved edge overlay has been applied to the image carousel using gif images. This can be removed by deleting the CSS reference and DIVs from the HTML section.

/* Curved edges */

    .curvedEdgeLeft {z-index:5;position:absolute;width:2px;height:180px;background-image:url('http://client.dv.adweb.com.au/intranet/slider_curved_edge_left.gif');}

    .curvedEdgeRight {z-index:5;position:absolute;margin: 0 0 0 698px;width:2px;height:180px;background-image:url('http://client.dv.adweb.com.au/intranet/slider_curved_edge_right.gif');}

<div class="curvedEdgeLeft"></div>

<div class="curvedEdgeRight"></div>

Back to Banner Viewer

Back to Apps

iD Help refers to iD 8

Viewing: {SubsiteLink}

{UsersFullName}

{Profile Name}

Show older comments

Show newer comments

{Profile Name}

{Profile Name}

Show older comments

Show newer comments

{Title}
in {Category}

{Title}
in {SubCategory}

{Title}
in {Calendar name}

{Title}
in {Room}

{Title}
in {Folder name}

{Title}

{Title}
in {Application Name}

{Title}
in {Subsite iD CMS}

{Title}
in {Subsite iD CMS}

{Title}
in {iD CMS Folder}

Share this component
Share Name	*
Add this component to current template Note: You must save the page to Live for this to take effect

Viewing: {SubsiteLink}

{UsersFullName}

{Profile Name}

Show older comments

Show newer comments

{Profile Name}

{Profile Name}

Show older comments

Show newer comments

{Title} in {Category}

{Title} in {SubCategory}

{Title} in {Calendar name}

{Title} in {Room}

{Title} in {Folder name}

{Title}

{Title} in {Application Name}

{Title} in {Subsite iD CMS}

{Title} in {Subsite iD CMS}

{Title} in {iD CMS Folder}

{Title}
in {Category}

{Title}
in {SubCategory}

{Title}
in {Calendar name}

{Title}
in {Room}

{Title}
in {Folder name}

{Title}
in {Application Name}

{Title}
in {Subsite iD CMS}

{Title}
in {Subsite iD CMS}

{Title}
in {iD CMS Folder}