Изменение атрибута

Question

У меня есть эта проблема, где мне нужно изменить ширину до 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 файле.

Но когда я ищу ширину атрибута: 1349px или просто 1349 на каждой странице, в файле css, js, я ничего не получаю. Я что-то пропустил? Я бы разместил здесь файл 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')) 

Answer 1

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

Или же:

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

Или я что-то упустил в вашем вопросе...

Answer 2

CSS написано в JavaScript. Посмотрите jquery.prettyPhoto.js. Прокрутите вниз туда, где написано

$('.pp_overlay').css И вы можете отредактировать его там, вероятно, с помощью предыдущего предложения, которое сделал Вольф.

Answer 3

Ты можешь сделать:

$(".pp_overlay[style*='width: 1349px']").css("width", "100%");

Answer 4

Это трудно понять без полного кода.

Возможно, ширина генерируется динамически с помощью плагина с помощью JavaScript-вычисления.

Если это так, у вас есть 2 варианта:

1. Изменить логику расчета

2. Используйте jquery, чтобы изменить ширину после рендеринга всей страницы.

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