0

这是一个垂直画廊。

http://www.braddockinfotech.com/demo/dvnonline/vod/

When a particular video in gallery is selected, the selection is left aligned.I hope the below picture makes it clear

在此处输入图像描述

如何使选择中心对齐。我的意思是目前选择触及容器的左边框而不是容器的右边框(橙色虚线)。我希望选择只选择内部视频图像而不是容器边框

这是html代码

    <body onkeydown="HandleKeyDown(event);">
    <table cellpadding="0px" cellspacing="0px" border="0px" class="sitewidth">
        <tr>
            <td align="left" valign="top" style="width:800px;">
                <div id='divVideoPlayer'></div>
            </td>
            <td align="center" style="width:140px;">
                <div id="divPlaylistContainer">
                    <div id="playlistNavPrev">
                        <a id="imgNavPrev" onclick="MoveToDirection('Up');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                    <div id="divPlaylist">
                        <!--playlist-->
                        <div id="spanSlider" style='top:0px; position:relative;'>
                            <ul id="ulSlider">
                                <?php $index=1 ; $firstVideoUrl='' ; $firstImageUrl='' ; $videoDetails=G
                                etVideoDetails(); echo "<script> var siteUrl = '".$siteUrl.
                                "' </script>"; while ($row=m ysql_fetch_array($videoDetails)) { echo
                                "<script>video[".$index. "]='";echo $row[3]. "';</script>"; echo "<script>image[".$index.
                                "]='";echo $row[2]. "';</script>"; //echo "<script>title[".$index. "]='";echo
                                $row[1]. "';</script>"; echo "<script>title[".$index. "]='";echo str_replace(
                                "'", "\'",$row[1]). "';</script>"; // 0 - id , 1 - Title , 2- ImageUrl, 3
                                - VideoUrl //echo $row[0].$row[1].$row[2].$row[3]. "<br/>"; //echo
                                "<li id='liButton_".$index. "'><a  onclick=\"ShowVideo( '".$index."');\
                                "><img id='ImageButton_".$index. "' title='".$row[1]. "' alt='".$row[1]. "' src=".$siteUrl.
                                "timthumb/timthumb.php?src=".$row[2]. "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>"; $index++;
                                } ?>
                            </ul>
                        </div>
                    </div>
                    <div id="playlistNavNxt">
                        <a id="imgNavNext" onclick="MoveToDirection('Down');"><span class="arrow">&nbsp;</span>
                        </a>
                    </div>
                </div>
            </td>
    </table>
</body>

这是javascript代码

 var video = new Array();
 var image = new Array();
 var title = new Array();
 var noOfImagesCanShow = 6;
 var selected = 1;
 var slideNo = 1;


 String.prototype.trim = function () {
     return this.replace(/^\s+|\s+$/g, "");
 };

 function SetPlayList() {
     var listHtml = '';
     var lastIndex = slideNo * noOfImagesCanShow;
     var firstIndex = (slideNo * noOfImagesCanShow) - (noOfImagesCanShow - 1);
     var rowNo = 1;
     for (var i = firstIndex; i <= lastIndex; i++) {
         if (firstIndex >= 1 && lastIndex < title.length) {
             listHtml += "<li id='liButton_" + rowNo + "'><a  onclick=\"ShowVideo('" + i + "');\"><img id='ImageButton_" + i + "' title=\"" + title[i] + "\" alt='" + title[i] + "' src=" + siteUrl + "timthumb/timthumb.php?src=" + image[(i)] + "&amp;h=54&amp;w=109&amp;zc=1&amp;a=c></a></li>";
             rowNo++;
         }
     }
     document.getElementById('ulSlider').innerHTML = listHtml;
     document.getElementById('liButton_1').tabIndex = 2;
     document.getElementById('liButton_1').focus();
 }

 function ShowVideo(videoIndex) {
     var streamToBeUsed = "";
     var provideType = "";
     if (video[videoIndex].trim().substring(0, 7) == "http://") {
         streamToBeUsed = '';
         provideType = "http";
     } else {
         streamToBeUsed = "rtmp://cp87191.edgefcs.net/ondemand/";
         provideType = "rtmp";
     }
     var autostart = "true";

     if (jwplayer("divVideoPlayer") != null) {
         jwplayer("divVideoPlayer").stop();
     }

     jwplayer("divVideoPlayer").setup({
         file: streamToBeUsed + video[videoIndex].trim(),
         image: image[videoIndex],
         icons: "true",
         autostart: autostart,
         screencolor: "black",
         'width': '800',
         'height': '510',
         streamer: streamToBeUsed,
         provider: provideType,
         events: {
             onBeforePlay: function () {
                 document.getElementById('liButton_' + videoIndex).tabIndex = '2';
                 document.getElementById('liButton_' + videoIndex).focus();
             }
         }
     });
     // clearing all style
     var totalImages = noOfImagesCanShow;
     for (var i = 1; i <= totalImages; i++) {
         var imageId = (((slideNo * noOfImagesCanShow) - (noOfImagesCanShow)) + i).toString();
         if (document.getElementById('liButton_' + i) != null && document.getElementById('ImageButton_' + imageId) != null) {
             document.getElementById('liButton_' + i).className = 'inactiveli';
             document.getElementById('ImageButton_' + imageId).className = 'inactive';
         }
     }
     document.getElementById('liButton_' + videoIndex).className = 'activeli';
     document.getElementById('ImageButton_' + (((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex)).toString()).className = 'active';

     SetButtonStatus(((slideNo - 1) * noOfImagesCanShow) + parseInt(videoIndex));


     document.getElementById('liButton_' + videoIndex).tabIndex = '2';
     document.getElementById('liButton_' + videoIndex).focus();
     document.getElementById('divVideoPlayer').tabIndex = '-1';

 }

 function SetButtonStatus(imageIndex) {
     if (imageIndex <= noOfImagesCanShow) {
         document.getElementById('imgNavPrev').className = 'disable_up';
         document.getElementById('imgNavPrev').tabIndex = '-1';
         document.getElementById('imgNavNext').tabIndex = '3';
     } else {
         document.getElementById('imgNavPrev').className = 'enable_up';
         document.getElementById('imgNavPrev').tabIndex = '1';
     }

     if (imageIndex > (image.length - noOfImagesCanShow)) {
         document.getElementById('imgNavNext').className = 'disable_down';
         document.getElementById('imgNavNext').tabIndex = '-1';
         document.getElementById('imgNavPrev').tabIndex = '1';
     } else {
         document.getElementById('imgNavNext').className = 'enable_down';
         document.getElementById('imgNavNext').tabIndex = '3';
     }
 }

 function MoveToDirection(direction) {
     if (direction == 'Down') {
         if (document.getElementById('imgNavNext').className != 'disable_down') {
             slideNo++;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
         }
     } else if (direction == 'Up') {
         if (document.getElementById('imgNavPrev').className != 'disable_up') {
             slideNo--;
             SetButtonStatus(slideNo * noOfImagesCanShow);
             SetPlayList();
             document.getElementById('liButton_6').focus();
         }
     }
 }

 function HandleKeyDown(ev) {
     if (document.activeElement != null) {
         var element = document.activeElement;

         if (ev.keyCode == 13) {
             /*User Pressed Enter, Handle If required*/
             if (element.id == "imgNavNext" && element.className != "disable_down") {
                 MoveToDirection('Down');
             } else if (element.id == "imgNavPrev" && element.className != "disable_up") {
                 MoveToDirection('Up');
             } else if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 ShowVideo(nameSections[1]);
             }
         } else if (ev.keyCode == 40) {
             /*User Pressed Down*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) + 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navNext
                 {
                     if (document.getElementById('imgNavNext').className != 'disable_down') {
                         document.getElementById('imgNavNext').focus();
                     }
                 }

             } else {
                 if (element.id.indexOf("imgNavPrev") > -1) {
                     document.getElementById("liButton_1").focus();
                 }
             }
         } else if (ev.keyCode == 38) {
             /*User Pressed Up Up*/
             if (element.id.indexOf("liButton_") > -1) {
                 var nameSections = element.id.split('_');

                 var nextIndexToFocus = (parseInt(nameSections[1])) - 1;
                 if (document.getElementById("liButton_" + nextIndexToFocus) != null) {
                     document.getElementById("liButton_" + nextIndexToFocus).tabIndex = element.tabIndex;
                     element.tabIndex = "-1";
                     document.getElementById("liButton_" + nextIndexToFocus).focus();
                 } else //need to focus in navPrev
                 {
                     if (document.getElementById('imgNavPrev').className != 'disable_up') {
                         document.getElementById('imgNavPrev').focus();
                     }
                 }
             } else /* To handle up button from imgNavNext */
             {
                 if (element.id.indexOf("imgNavNext") > -1) {
                     document.getElementById("liButton_6").focus();
                 }
             }
         }
     }
 }
4

3 回答 3

0

我想你已经对齐了。您可以通过删除两个css- 类中给出的填充来尝试它

#divPlaylistContainer {
    border: 1px solid #0080FF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 5px #888888;
    margin: 10px 0 0 20px;
   /* padding: 0 10px 0 0;  padding removed */
    width: 140px;
}

#divPlaylist此外,可以删除填充。来源:http ://css-tricks.com/removing-the-dotted-outline/

#divPlaylist ul li {
    list-style-type: none;
    /*padding: 5px 0 5px 15px; padding removed*/
}

或者你可以设置padding: 5px 15px;li。我希望这对你有用。

嗯...我已经编辑了答案。看看在你的 css 中为liand再添加一个属性<a>。单击 Href 时,它有一个虚线轮廓。

outline:0;

可能它会删除周围的虚线边框li,它会很酷:)

于 2013-02-04T13:10:07.330 回答
0

添加margin:0 auto.sitewidth

.sitewidth {
width: 960px;
margin: 0 auto;
}
于 2013-02-04T12:01:53.243 回答
0
  .activeli 
   {
    margin:0 auto;
    width:500px;
   }
于 2013-02-04T12:10:46.290 回答