-1

我有这个问题,我需要在这个元素中将宽度更改为 100%:

  div class="pp_overlay" style="opacity: 0.8; height: 871px; width: 1349px; display: block;"

基本 url 说文件在这里:

  images.html#!prettyPhoto[gallery]/0/

我认为文件所在的位置在 prettyPhoto.js 文件中,因为它不在 images.html 或 css 文件中。

但是,当我在每个页面、css、js 文件中搜索属性宽度:1349px 或仅 1349 时,我什么也得不到。我错过了什么吗?我会把javascript文件放在这里,但它真的很长。

这是具有 .pp_overylay 的顶部

(function ($) {
    $.prettyPhoto = { version: '3.1.3' }; $.fn.prettyPhoto = function (pp_settings) {
        pp_settings = jQuery.extend({ animation_speed: 'fast', slideshow: 5000, autoplay_slideshow: false, opacity: 0.80, show_title: true, allow_resize: true, default_width: 500, default_height: 344, counter_separator_label: '/', theme: 'pp_default', horizontal_padding: 20, hideflash: false, wmode: 'opaque', autoplay: true, modal: false, deeplinking: true, overlay_gallery: true, keyboard_shortcuts: true, changepicturecallback: function () { }, callback: function () { }, ie6_fallback: true, markup: '<div class="pp_pic_holder"><div class="ppt">&nbsp;</div><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content_container"><div class="pp_left"><div class="pp_right"><div class="pp_content"><div class="pp_loaderIcon"></div><div class="pp_fade"><a href="#" class="pp_expand" title="Expand the image">Expand</a><div class="pp_hoverContainer"><a class="pp_next" href="#">next</a><a class="pp_previous" href="#">previous</a></div><div id="pp_full_res"></div><div class="pp_details"><div class="pp_nav"><a href="#" class="pp_arrow_previous">Previous</a><a href="#" class="pp_arrow_next">Next</a><p class="currentTextHolder">0/0</p></div><p class="pp_description"></p><div class="pp_social">{pp_social}</div><a class="pp_close" href="#">Close</a></div></div></div></div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div><div class="pp_overlay"></div>', gallery_markup: '<div class="pp_gallery"><a href="#" class="pp_arrow_previous">Previous</a><div><ul>{gallery}</ul></div><a href="#" class="pp_arrow_next">Next</a></div>', image_markup: '<img id="fullResImage" src="{path}" />', flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>', quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>', iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>', inline_markup: '<div class="pp_inline">{content}</div>', custom_markup: '', social_tools: '<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' }, pp_settings); var matchedObjects = this, percentBased = false, pp_dimensions, pp_open, pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth, windowHeight = $(window).height(), windowWidth = $(window).width(), pp_slideshow; doresize = true, scroll_pos = _get_scroll(); $(window).unbind('resize.prettyphoto').bind('resize.prettyphoto', function () { _center_overlay(); _resize_overlay() }); if (pp_settings.keyboard_shortcuts) {
            $(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto', function (e) {
                if (typeof $pp_pic_holder != 'undefined') {
                    if ($pp_pic_holder.is(':visible')) 
4

4 回答 4

2
$('.pp_overlay').width('100%');

或者:

$('.pp_overlay').css({width:'100%'});

或者我在你的问题中遗漏了一些东西......

于 2013-07-03T14:00:37.287 回答
0

It's hard to figure this out without full code.

Probably, the width is being generated dynamically by the plugin through JavaScript calculation.

If so, you have 2 options:

  1. Change the calculation logic
  2. Use jquery to change the width once the whole page is rendered.

    $(document).ready( function(e) { $('div.pp_overlay').css({ 'width':'100%' }); });

于 2013-07-03T14:03:08.973 回答
0

你可以做:

$(".pp_overlay[style*='width: 1349px']").css("width", "100%");
于 2013-07-03T14:00:24.383 回答
0

css被写入javascript。查找 jquery.prettyPhoto.js。向下滚动到它说的地方

$('.pp_overlay').css 你可以在那里编辑它,可能是 Wolff 之前提出的建议。

于 2014-04-14T23:01:10.930 回答