Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
Hi,

I'm using the portfolio.php page and have adapted it to show videos instead of the enlarged image once clicked on. I've managed to do it; however, the videos seem to play in the correct order after the first play, then it seems to play the same video even if I switch between them both?

I've tried changing the orderby='random' to orderby='page_title' but doesn't seem to change anything? It's probably something really simple.


Code: Select all
<cms:template title='Portfolio' clonable='1'>
   <cms:editable
       name='content'
       label='Content'
       desc='Enter description of portfolio item here'
       type='richtext' />

   <cms:editable name='group_img1' label='First Image' desc='First Image' type='group' />
   <cms:editable
      name='image_1'
      label='Image 1'
      desc='Upload first image of portfolio here'
      crop='1'
      width='600'
      height='300'
      group='group_img1'
      type='image'
   />
   <cms:editable
     name='thumb'
     label='Image Thumbnail'
     desc='Thumbnail of first image'
     crop='1'
     width='200'
     height='112'
     show_preview='1'
     assoc_field='image_1'
     group='group_img1'
     type='thumbnail'
   />
   <cms:editable
       name='image_1_title'
       label='Image Title'
       desc='Enter images\'s title here'
       group='group_img1'
       type='text'/>
   
   <cms:editable name='group_img2' label='Second Image' desc='Second Image' type='group' />
   <cms:editable
      name='image_2'
      label='Image 2'
      desc='Upload second image of portfolio here'
      width='600'
      height='300'
      crop='1'
      group='group_img2'
      type='image'
   />
   <cms:editable
       name='image_2_title'
       label='Image Title'
       desc='Enter images\'s title here'
       group='group_img2'
       type='text'/>
   
   <cms:editable name='group_img3' label='Third Image' desc='Third Image' type='group' />
   <cms:editable
      name='image_3'
      label='Image 3'
      desc='Upload third image of portfolio here'
      width='600'
      height='300'
      crop='1'
      group='group_img3'
      type='image'
   />
   <cms:editable
       name='image_3_title'
       label='Image Title'
       desc='Enter images\'s title here'
       group='group_img3'
       type='text'/>
   
      <cms:folder name='cat_1' title='First Category' />
      <cms:folder name='cat_2' title='Second Category' />
      <cms:folder name='cat_3' title='Third Category' />
      <cms:folder name='cat_4' title='Fourth Category' />
      <cms:folder name='cat_5' title='Fifth Category' />
</cms:template>

<cms:if k_is_page >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
   <!-- Stylesheets -->
   <link href="assets/mainbody.css" rel="stylesheet" type="text/css" />
   <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css" />
   
   
   <!-- Scripts -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script>
   <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
   <script type="text/javascript" src="js/jquery.roundabout-shapes-1.1.js"></script>
   <script type="text/javascript">         
      $(document).ready(function() { //Start up our Project Preview Carosuel
         $('ul#folio_scroller').roundabout({
            easing: 'easeOutInCirc',
            shape: 'waterWheel',
            duration: 600
         });
      });
   </script> 
   <!--[if IE 6]>
   <script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
   <script>
     /* EXAMPLE */
     DD_belatedPNG.fix('.button');
    
     /* string argument can be any CSS selector */
     /* .png_bg example is unnecessary */
     /* change it to what suits you! */
   </script>
   <![endif]-->
</head>

<body>
<style>
   
   body {
      background:#000;
      color:#fff;
   }
                        
   h1 {
    color:#fff!important;
       }                     
   </style>
   
      
      <!-- Column 1 / Project Information -->
      <div class="grid_4">
      
      
      
      <div class="hr dotted clearfix">&nbsp;</div>
         <cms:show content />
         <p class="clearfix">
            <a href="<cms:link masterpage='portfolio.php' />" class="button float" id="backhome">&lt;&lt; Back</a>
            
         </p>
      </div>
   
                                             
                                             
       <div class="container-fluid">
      <div class="row-main-bg" id="vids">
      <!-- Column 2 / Image Carosuel -->
      <div id="folio_scroller_container" class="grid_8 cleafix">
         <ul id="folio_scroller">
            
            <li><cms:pages limit='1' masterpage='portfolio.php' orderby='page_title'>
    <video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered"
        controls preload="auto" width="640" height="264"
        poster="<cms:show video_thumb/>">
       
        <cms:if video_mp4>
            <source src="<cms:show video_mp4/>" type="video/mp4"/>
        </cms:if>

        <cms:if video_webm>
            <source src="<cms:show video_webm/>" type="video/webm"/>
        </cms:if>

        <cms:if video_ogv>
            <source src="<cms:show video_ogv/>" type="video/ogg"/>
        </cms:if>

    </video>
</cms:pages>
            </li>
         </ul>
      </div>
      </div>
      </div>


Code: Select all
      <center><h3><strong>Our Projects</strong></h3></center>
      <hr width="95%"">
      <div class="pr grid_12 clearfix">&nbsp;</div>
      
      <!-- Portfolio Items -->
      
      <!-- Section 1 -->
      
      <!-- Section 3 -->
      
      <cms:folders masterpage='portfolio.php'>
         
      <div class="catagory_1 clearfix">
         
         <!-- Row 1 -->
         <div class="grid_3 textright" >
            
            <cms:pages masterpage='portfolio.php' page_name=k_folder_name >
            <span class="meta"><cms:show folder_blurb /></span>
            <h4 class="title "><cms:show k_folder_title /></h4>
            <div class="hr clearfix dotted">&nbsp;&nbsp;</div>
            <cms:show folder_desc />
            </cms:pages>
         </div>
         <cms:template clonable='1' title='Projects'>
    <cms:editable crop='1' height='264' label='Thumbnail' name='video_thumb' show_preview='1' type='image' width='640'/>
    <cms:editable label='MP4' name='video_mp4' type='file'/>
    <cms:editable label='WebM' name='video_webm' type='file'/>
    <cms:editable label='Ogv' name='video_ogv' type='file'/>
   
</cms:template>
         <div class="grid_9">
            <cms:pages masterpage='portfolio.php' folder=k_folder_name>
         
            <a class="portfolio_item float <cms:zebra 'alpha' '' 'omega' />" id="thumbnail" href="<cms:show k_page_link />">
               <img alt="" src="<cms:show thumb />"  alt-text="<cms:show k_page_title />"/>
            </a>
      
            </cms:pages>
            <div class="clear"></div>
         </div>
      </div>
         
      <div class="hr grid_12 clearfix">&nbsp;</div>
      </cms:folders>


Really appreciate your help
Hi,

The code you posted seems to be incomplete.
Please zip and PM me all the relevant files (enough for me to recreate things on my machine, if needed) and I'll take a look at the issue.

Thanks.
Hi KK,

I solved the problem. I removed the <cms:template etc... > from it and it works perfectly!

Thanks
3 posts Page 1 of 1