0

我正在构建一个使用插件创建画廊视图视频源的网站。在生成画廊视图的 PHP 文件中，我添加了一个播放按钮以显示在视频缩略图的顶部。当按钮正确显示时，插件将视频链接直接应用于缩略图，因此如果用户直接单击按钮，它不会打开视频模式。

<div class="media-thumb videoPreviewBox">
    <div class="videoPreview">
        </a><img src="<?php   echo $image_path?>" href="#popup_prep" alt="<?php  echo $file_src?>" class="<?php  echo $playerID?>player_get<?php  echo $i?> gallery_thumb" href="<?php  echo $file_src?>"/>
        <img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
        <img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
    </div>
</div>

虽然我不确定为什么在它所在的位置有一个结束标签，但该插件似乎工作正常。我认为问题在于 href="#popup_prep" 应用于图像。我尝试在 <a href="#popup_prep"> （添加空间以显示帖子中的标签）中包装缩略图图像和播放按钮状态，无论是否将 href 应用于图像。

我被难住了，不想搞砸任何事情。希望这里的PHP人能指出我做错了什么。非常感谢！

这篇文章的其余部分是我为尽职调查而包含的信息，因为我不确定需要多少以及需要什么上下文。首先是应用于这些元素的 CSS，然后是用于画廊视图的完整 PHP 文件。

div.videoPreviewBox {
  float: left;
  display: inline-block;
  width: 21%;
  margin: 2%;
  margin-top: 0%;
}

@media only screen and (max-width: 594px) {
  div.videoPreviewBox {
    width: 46%;
  }
}
@media only screen and (max-width: 300px) {
  div.videoPreviewBox {
    width: 96%;
  }
}

div.videoPreview { 
  position: relative;
}

img.videoPreviewImg {
  width: 100%;
  z-index: 1;
}

img.playButtonHover, img.playButton {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
}

div.videoPreview:hover img.playButton {
  opacity: 0;
}

div.videoPreviewBox p {
  margin-top: 2%;
  color: white;
  line-height: 18px;
}

.player_wrapper{float: left;}
.player{float: left;clear: both;}
.scroller{margin-bottom: 35px; float: left;clear: both; width: 100%;}
.rssIcon{float: left;clear: both;}
.scroll_item{clear: left; float: left;}
.thumb_img{margin-right: 12px; margin-bottom: 25px; float: left; border-color: white; border-width: 2px; border-style: solid; background-color: #dddddd; height: 135px;}
.preview{ width: 600px; }.play_button{padding: 8px; background-color: #e9e9e9; border-color: #c9c9c9; border-width: 1px; border-style: solid; float: right;}
.rssIcon{width: 100%;}
.gallery_thumb{margin-bottom: 12px; margin-right: 12px; }
.gallery_thumb:hover{cursor: pointer;}
.mejs-container{margin-top: 20px!important}

以及完整的 PHP 库视图文件：

<?php   
    defined('C5_EXECUTE') or die(_("Access Denied."));
    $btID = $b->getBlockTypeID();
    $bt = BlockType::getByID($btID);
    $uh = Loader::helper('concrete/urls');
    $rssUrl = $controller->getRssUrl($b);
    $textHelper = Loader::helper("text"); 
    $fl = Loader::model('file_version');
    $uh = Loader::helper('concrete/urls');
    $mh = Loader::helper('media_type','promedia');
    $bt = BlockType::getByHandle('promedia_list');
    $height = '400';
    $width = '600';
    $spread = 4;
    $playerID = rand(0,777777);

    if (count($cArray) > 0) { ?>
    <div class="scroller">
    <div id="media_galery">
    <?php  
    $t = 0;

            for ($i = 0; $i < count($cArray); $i++ ) {
                $t++;
                $file = $cArray[$i];
                $remote = null;
                $name = $file->getFileName();
                $file_path = BASE_URL.DIR_REL.$file->getDownloadURL();
                $ak_d = FileAttributeKey::getByHandle('media_date'); 
                $date = $file->getAttribute($ak_d);

                $ak_a = FileAttributeKey::getByHandle('media_artwork'); 
                $image = $file->getAttribute($ak_a);
                if($image==null){
                    $image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png';
                }else{
                    $image = File::getByID($image->fID);
                    $image_path=$image->getURL();
                }


                $file_src = BASE_URL.DIR_REL.$file->getRelativePath();

                $ak_s = FileAttributeKey::getByHandle('media_audio'); 
                $audio = $file->getAttribute($ak_s);
                if($audio){
                    $audio_array = $mh->getMediaTypeOutput($audio);
                    $audio_path = $audio_array['path'];
                    $file_src = $audio_path;
                }

                $video = null;
                $ak_s = FileAttributeKey::getByHandle('media_video'); 
                $video = $file->getAttribute($ak_s);

                if($video){
                    $video_array = $mh->getMediaTypeOutput($video);
                    $video_path = $video_array['path'];
                    //var_dump($video_array['id']);
                    $image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']);
                    //$video_src = $video_path.'?width='.$width.'&height='.$height;
                    //$file_src = $video_src;
                    if($video_array['type'] == 'vimeo'){
                        $file_src = 'http://player.vimeo.com/video/'.$video_array['id'];
                    }else{
                        $file_src = $video_path;
                    }
                }
                ?>
                <div class="media-thumb videoPreviewBox">
                    <div class="videoPreview">
                        </a><img src="<?php   echo $image_path?>" href="#popup_prep" alt="<?php  echo $file_src?>" class="<?php  echo $playerID?>player_get<?php  echo $i?> gallery_thumb" href="<?php  echo $file_src?>"/>
                        <img class="playButtonHover" src="<?php echo $this->getThemePath()?>/images/playButtonHover.png">
                        <img class="playButton" src="<?php echo $this->getThemePath()?>/images/playButton.png">
                    </div>
                </div>
            <?php  
            if($t == $spread){
                $t=0;
                echo '</tr>';
            }
    }

    for($d=$t;$d<$spread;$d++){
        echo '<td></td>';
        if($t == $spread){
            echo '</tr>';
        }
    }
    ?>
    </div>
    </div>
    <div style="display: none;">
        <div id="popup_prep">

        </div>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function() {
        $('.gallery_thumb').fancybox({
            width: 'auto',
            height: 'auto',
            onClosed: function(){
                $('video, audio').each(function() {
                  $(this)[0].player.pause();          
                });
            }
        });
    });
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    $('.gallery_thumb').click(function(){
        $('#popup_prep').html('');
        var html = '';
        var path = $(this).attr('alt');
        //console.log(path);
        var extension = path.substr( (path.lastIndexOf('.') +1) );

        if(extension){
            switch(extension) {
                case 'm4v':  
                case 'mpeg':
                case 'mpg':
                case 'wmv':
                case 'avi':
                case 'mov':
                case 'flv':
                case 'f4v':
                case 'mp4':
                  html = '<video class="player_box" id="play" controls="controls" src="'+path+'" width="<?php  echo $width?>" height="<?php  echo $height?>"></video><br style="clear: both;"/>';
                  break;    
                case 'mp3':
                case 'm4a':
                  html = '<audio class="audioplayer" id="play"  src="'+path+'" controls="controls" type="audio/m4a"></audio><br style="clear: both;"/>';
                  break;   
                default:
                  var iFrame = true;
                  html = '<iframe title="video player" width="<?php  echo $width?>px" height="<?php  echo $height?>px" src="'+path+'" frameborder="0" allowfullscreen></iframe>'; 
            }
        }
        $('#popup_prep').append(innerShiv(html));
        if(!iFrame){
            var player = new MediaElementPlayer('video,audio');
        }
    });
    /*]]>*/
    </script>
    <?php   

    } 
    if(!$previewMode && $controller->rss) { 
            ?>
            <div class="rssIcon">
                <img src="<?php   echo $uh->getBlockTypeAssetsURL($bt, 'rss.png')?>" width="14" height="14" /><a href="<?php   echo $rssUrl?>" target="_blank">get this feed</a>

            </div>
            <link href="<?php   echo $rssUrl?>" rel="alternate" type="application/rss+xml" title="<?php   echo $controller->rssTitle?>" />
            <br/>
        <?php   
    } 


    if ($paginate && $num > 0 && is_object($_fl)) {
        $_fl->displayPaging();
    }

?>

对于完整的上下文，这里是页面。

4

1 回答 1

0

我不完全是 php 专家，但我注意到这行代码中存在一些问题：

</a><img src="<?php   echo $image_path?>" href="#popup_prep" alt="<?php  echo $file_src?>" class="<?php  echo $playerID?>player_get<?php  echo $i?> gallery_thumb" href="<?php  echo $file_src?>"/>

首先，我不确定为什么那里有一个“/a”。这通常是超链接的结束标记。（如果我把 <> 放在那里，它会从答案中消失并像 html 一样被读取，所以让我们假装“”与 <> 相同）。

其次，看起来你把 href 和 alt 引号内的东西弄混了。href 是链接，alt 是描述。除非您希望描述与图像链接相同，但我会推荐更合适的内容，例如 alt="播放视频"。

第三，检查班级的空间数量。例如，如果 $playerID="123" 并且 $i=1。类如下：123player_get1 gallery_thumb（注意 $i 之间的空格，或在本例中为数字 1 和 gallery_thumb）。同样，我可能是错的，但我认为不应该存在空格，并且可以通过消除关闭 php 标记旁边的空格来修复它。

第四，在这个 img 标签中有两个 href=""。就像我说的我不是专家，但我假设第一个不需要在那里并且可能会造成麻烦，因为 href 是单击图像时它将带你到的链接。

第五，我不确定它是否真的重要，但通常一个 img 标签最后没有 />，它只需要一个 >。

尝试将它替换为这行代码：

img src="<?php echo $image_path ?>" href="<?php  echo $file_src ?>" alt="YOUR DESCRIPTION HERE" class="<?php echo $playerID ?>player_get<?php echo $i ?>gallery_thumb">



*编辑：如果它有效，请确保您了解原因！

于 2013-08-05T01:26:04.810 回答