0

My Complete website can be seen here.

I'm trying to make a playlist that plays videos. The video and thumbnail information all fill out correctly and after adding two entries all looks fine. However, I can no longer click on the appropriate thumbnail and select the video I want. The latest entry (e.g. Part 2) shows as the selected and I cannot select Part 1. Is something wrong with my tagging? The specific part I'm talking about below is the section tagged data-thumb="{sermon_thumbnail}".

Here is my code:

{exp:channel:entries channel="sermon_details" status="open" dynamic="no"} 
    <!-- VIDEO 1  -->
    <li data-index="rs-105" 
        data-transition="fade"
        data-slotamount="default"  
        data-easein="default" 
        data-easeout="default" 
        data-masterspeed="default"  
        data-thumb="{sermon_thumbnail}"  
        data-rotate="0"  
        data-saveperformance="off"  
        data-title="Part {sermon_part}<br/>{speaker_name}" 
        data-param1="{entry_date format="%F %d, %Y"}" 
        data-description="">
        <!-- MAIN IMAGE -->
        <img src="{site_url}images/video-back.png"  alt=""  data-lazyload="{site_url}images/video-back.png" data-bgposition="center center" data-bgfit="contain" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
        <div class="tp-caption   tp-resizeme fullscreenvideo tp-videolayer"
            id="slide-105-layer-3"
            data-x="0"
            data-y="0"
            data-width="['auto']"
            data-height="['auto']"
            data-transform_idle="o:1;"

            data-transform_in="s:1000;e:Power1.easeInOut;"
            data-transform_out="s:1000;s:1000;"
            data-start="1150"
            data-responsive_offset="on"

            data-vimeoid="{vimeo_id}" 
            data-videoattributes="title=0&byline=0&portrait=0&api=1" 
            data-videowidth="100%" 
            data-videoheight="100%" 
            data-videoloop="none" 
            data-forceCover="1"
            data-aspectratio="16:9"
            data-autoplay="off"
            data-nextslideatend="true"
            data-volume="100"
            data-forcerewind="on"
            style="z-index: 5;"
        >
        </div>
    </li>
{/exp:channel:entries} 
0

Figured out the problem. It was a <li> tag data-index attribute I was not familiar with. Never seen that before, hence, didn't know I needed to change it to accommodate the aggregation of HTML text as the user adds more sermons. This is what I had for that attribute within the <li> div:

I changed the <li data-index="rs-105" to <li data-index="rs-{sermon_part}"

For clarity, later in this same file, I have a custom field named {sermon_part} used numbering what part the sermon is (Part 1, 2, 3, etc). I simply placed that field {sermon_part} after the rs- and it worked like a charm. I knew this answer was probably stupid simple. Still learning just how simple EE dev is I guess. :)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.