0

我正在使用 Index Exhibit 建立一个水平滚动的站点。一个部分需要一个视频，我无法在 Indexhibit CMS 后端设置（它会将它添加到宽 div 的宽度），所以我需要将它添加到 PHP 生成文件中。基本上，它需要检查是否存在具有 ID 的元素vid。如果是这样，它应该将vid_width和添加vid_right_padding到最终宽度，final_img_container。如果没有，它应该被排除在外。可以在此处找到包含视频的网站：http ://www.allisonnavon.com/index.php?/projects/the-alka-seltzer-challenge/ 正如您在此处看到的，宽度是完美的，但是当其他页面加载后，每个项目的右端都有一个巨大的 800 额外像素。

这是代码：

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Horizontal Format
*
* Exhbition format
* Originally created for SharoneLifschitz.com
* 
* @version 1.1
* @author Vaska 
*/

$DO = new Horizontally;

$exhibit['exhibit'] = $DO->createExhibit();
$exhibit['dyn_css'] = $DO->dynamicCSS();

class Horizontally
{
    // PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
    var $picture_block_padding_right = 25;
    var $text_width = 250;
    var $text_padding_right = 75;
    var $vid_width = 800;
    var $vid_padding_right = 25;
    var $final_img_container = 0; // do not adjust this one

    function createExhibit()
    {
        $OBJ =& get_instance();
        global $rs;

        $pages = $OBJ->db->fetchArray("SELECT * 
            FROM ".PX."media, ".PX."objects_prefs 
            WHERE media_ref_id = '$rs[id]' 
            AND obj_ref_type = 'exhibit' 
            AND obj_ref_type = media_obj_type 
            ORDER BY media_order ASC, media_id ASC");

        if (!$pages) return $rs['content'];

        $s = ''; $a = ''; $w = 0;
        $this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width + $this->vid_padding_right + $this->vid_width) : 0;

        foreach ($pages as $go)
        {
            $title = ($go['media_title'] == '') ? '' : "<div class='title'>" . $go['media_title'] . "</div>";
            $title .= ($go['media_caption'] == '') ? '' : "<div class='caption'>" . $go['media_caption'] . "</div>";

            $temp_x = $go['media_x'] + $this->picture_block_padding_right;
            $this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right);

            $a .= "<div class='picture_holder' style='width: {$temp_x}px;'>\n";
            $a .= "<div class='picture' style='width: {$go[media_x]}px;'>\n";
            $a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='$go[media_x]' height='$go[media_y]' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n";
            $a .= "<div class='captioning'>$title</div>\n";
            $a .= "</div>\n";
            $a .= "</div>\n\n";
        }

        $s .= "<div class='text'><div class='scroller'><span><a href='javascript:void(0);' class='prev'>&laquo;</a></span><span class='title'><a href='javascript:void(0);' class='origin'><%title%></a></span><span><a href='javascript:void(0);' class='next'>&raquo;</a></span></div><div id='img-container'>\n";
        if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n";
        $s .= $a;
        $s .= "<div style='clear: left;'><!-- --></div>";
        $s .= "</div></div>\n";

        return $s;
    }


    function dynamicCSS()
    {
        return "#img-container { width: " . ($this->final_img_container + 1) . "px; }
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
#img-container #text p { width: " . $this->text_width . "px; }
#img-container #vid { float: left; width: " . ($this->vid_width + $this->vid_padding_right) . "px; }
#img-container #vid p { width: " . $this->vid_width . "px; }
#img-container .picture_holder { float: left; }
#img-container .picture { /* padding-top: 10px; */ }
#img-container .captioning .title { margin-top: 12px; font-weight: bold; }
#img-container .captioning .caption { font-family:PerspectiveSansItalic;
    font-size:11px; color: #444; padding-top: 10px;}";
    }
}
4

1 回答 1

1

加载页面时使用 Javascript 解决此问题不是更好吗？

只需找到 id 为“vid”的 div 并为其添加正确的 css。就像是：

$(function() {
    $("div#vid").load(function() {
        $(this).addClass("whateverclassyouwanttoadd");
    })
}

我不是 jquery 大师，但我认为这会解决你的问题。

只是一些sidenodes：我认为最好将您的演示文稿与您的业务逻辑分开。因此，使用样式表来标记您的 HTML 并将类添加到您的视图/业务逻辑中的 HTML。

只是我的 2 美分

祝你好运！

于 2010-10-14T06:29:07.437 回答