Image slide show using wcm web content viwer portlet

Step 1 :- Please refer to my previous blog on slide show using query. I will be using mockup and files from that post.

Step 2 :-  We will go step by step first create a presentation template as given below.  Then put the asp content given in my previous blog post.

Step 3 :- Now create components for css ,js files and include them in presentation template.

Now click on style sheet and add style sheet name

Now click browse and add css files to it

Now select and save the file

Now click on save and close

Similarly do it for other css files 

Step 4 :-  Now try to create file resources for java script files

Now click on file resource and add give a name to it

Click browse and add javascript file

Now click on save and close

Do the same for other js files also

Step 5 :- Now we have to map all these components in presentation template. Now navigate to presentation template and then click on insert a tag

Now in select a topic drop down select component reference

Now click on library component and then add the css component 

Now select a component and similarly do it for all css. Then you will get below refernces.

Step 6 :- Now we have to place those references in correct places like below.

 [Component id="958a42c8-14cd-41ea-9d78-4286ace9da19:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3cubWlu" name="riverbendteam content/slide show files/pgwslideshow.min"]

  [Component id="97e98fb2-c58b-4f2c-982d-05a22fa91979:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3dfbGlnaHQ=" name="riverbendteam content/slide show files/pgwslideshow_light"]

  [Component id="6580c146-a53b-402b-bcbf-22d4676adb95:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3dfbGlnaHQubWlu" name="riverbendteam content/slide show files/pgwslideshow_light.min"]

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <script type="text/javascript" src="[Component id="cc89ecd2-52de-4fbd-8c10-bbf4590b3dd7:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9qcy9wZ3dzbGlkZXNob3c=" name="riverbendteam content/slide show files/js/pgwslideshow"]" ></script>

  <script type="text/javascript" src="[Component id="23b55aa6-f9e4-44cc-b4a0-56ecee012135:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9qcy9wZ3dzbGlkZXNob3cubWlu" name="riverbendteam content/slide show files/js/pgwslideshow.min"]" ></script>

  <script type="text/javascript">

     $(document).ready(function() {

    $('.pgwSlideshow').pgwSlideshow();

  });

  </script>

Step 7 :- Now we have to create a Authoring template and map above presentation template

Step 8 :-  Now we have to draw outline of components in Authoring template so click on  manage elements and add two image components as given below 

                               Add second image component to authoring template

Now see at the bottom we have two image components outlined to AT

Step 9 :-  Now we have to create a site area to hold the content which will be mapped to AT

Step 10 :-  Go inside the site area and create a content by selecting previously created Authoring template

                            Now upload images to both image components 

                             Now select the workflow and select express workflow as default workflow

Step 11 :- Now save and close above content item and the open presentation template and then click on insert element tags and then insert Authoring template. 

  

            Now click on save. Finally our presentation show appear like below

[Component id="958a42c8-14cd-41ea-9d78-4286ace9da19:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3cubWlu" name="riverbendteam content/slide show files/pgwslideshow.min"]

  [Component id="97e98fb2-c58b-4f2c-982d-05a22fa91979:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3dfbGlnaHQ=" name="riverbendteam content/slide show files/pgwslideshow_light"]

  [Component id="6580c146-a53b-402b-bcbf-22d4676adb95:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9wZ3dzbGlkZXNob3dfbGlnaHQubWlu" name="riverbendteam content/slide show files/pgwslideshow_light.min"]

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <script type="text/javascript" src="[Component id="cc89ecd2-52de-4fbd-8c10-bbf4590b3dd7:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9qcy9wZ3dzbGlkZXNob3c=" name="riverbendteam content/slide show files/js/pgwslideshow"]" ></script>

  <script type="text/javascript" src="[Component id="23b55aa6-f9e4-44cc-b4a0-56ecee012135:NC9yaXZlcmJlbmR0ZWFtIGNvbnRlbnQvc2xpZGUgc2hvdyBmaWxlcy9qcy9wZ3dzbGlkZXNob3cubWlu" name="riverbendteam content/slide show files/js/pgwslideshow.min"]" ></script>

  <script type="text/javascript">

     $(document).ready(function() {

    $('.pgwSlideshow').pgwSlideshow();

  });

  </script>

  <ul class="pgwSlideshow">

<li>[Element context="current" type="content" key="img1"]</li>

    <li>[Element context="current" type="content" key="img2"]</li>

  </ul>

Step 12 :- Now you can preview then select a site area previously created and then preview it. You can see slide show.

Now click on ok you can see slide show