我对漂亮的照片模式弹出一个小问题。我使用内联内容加载页面加载。我得到的问题是图片无法加载...我不知道哪个图片无法加载。
这里的实时链接：http://smarthosting.rs/add/services.html
此处的代码：
<a id="ModalDiv" href="services.html#inline1" style="display: none;">adasdasdas</a>
<div id="inline_demo" style="width: 800px !important;height:644px !important;display: none;">
<div style="display: none;">
<div id="inline1" style="width: 600px; height: 644px; overflow: auto;">
<div class="col-md-6">
<img src="img/modal.jpg" />
</div>
<div class="col-md-6">
<p style="padding-top: 15px;" class="Custom-paragraphs-2"> PROFESSIONAL STAFFING – EXPERTS TALKING</p>
<p class="p11"> When finding talents requiring a given set of professional skills, our clients must be assured that we understand their specific needs. At the same time, our associates need to feel that we can accurately represent their best interests and career development needs.</p>
<p class="p11">This is why we have our so-called ‘experts talking’ approach – a high-end specialist point of contact for our clients and associates alike. Our experts have the industry experience and know-how to work with the talent in the market and to help our clients grow.</p>
<p class="p11"> Our associates value a supportive and highly informed advisor who can provide guidance and help them find the right job at the right time. They know that we can help them enhance their skills, experience and know-how through longer-lasting consecutive assignments at top companies.</p>
<p class="p11">For our clients, we are a partner who takes a consultative approach, delivering customised solutions to their needs for talent and expertise in a highly competitive world. </p>
<p class="p11">Our specialities </p>
<p class="p11">Our experts are talking and building strong relationships with our clients and associates in the following fields: </p>
<p class="p11">
Information Technology –<a style="color: rgb(83, 83, 83) !important;" href="services.html#">
find out more image description
<img src="img/arrow-red.gif" />
</a>
</p>
<p class="p11">
Engineering & Technical – <a style="color: rgb(83, 83, 83) !important;" href="services.html#">
find out more image description
<img src="img/arrow-red.gif" />
</a>
</p>
<p class="p11">
Finance & Legal – <a style="color: rgb(83, 83, 83) !important;" href="services.html#">
find out more image description
<img src="img/arrow-red.gif" />
</a>
</p>
<p class="p11">
Medical & Life Sciences – <a style="color: rgb(83, 83, 83) !important;" href="services.html#">
find out more image description
<img src="img/arrow-red.gif" />
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script src="plugins/Prettyphoto/js/jquery.prettyPhoto.js"></script>
<!-- END CORE SCRIPTS -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("#ModalDiv").prettyPhoto({
social_tool: ""
});
$("#ModalDiv").trigger("click");
});
</script>
这里有js设置：
(function($) {
$.prettyPhoto = {version: '3.1.5'};
$.fn.prettyPhoto = function(pp_settings) {
pp_settings = jQuery.extend({
hook: 'rel', /* the attribute tag to use for prettyPhoto hooks. default: 'rel'. For HTML5, use "data-rel" or similar. */
animation_speed: 'fast', /* fast/slow/normal */
ajaxcallback: function() {},
slideshow: 5000, /* false OR interval time in ms */
autoplay_slideshow: false, /* true/false */
opacity: 0.80, /* Value between 0 and 1 */
show_title: true, /* true/false */
allow_resize: true, /* Resize the photos bigger than viewport. true/false */
allow_expand: true, /* Allow the user to expand a resized image. true/false */
default_width: 800,
default_height: 744,
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
horizontal_padding: 20, /* The padding on each side of the picture */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
wmode: 'opaque', /* Set the flash wmode attribute */
autoplay: true, /* Automatically start videos: True/False */
modal: false, /* If set to true, only the close button will close the window */
deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
overlay_gallery_max: 30, /* Maximum number of pictures in the overlay gallery */
keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
callback: function(){}, /* Called when prettyPhoto is closed */
ie6_fallback: true,
markup: '<div class="pp_pic_holder"> \
<div class="ppt"> </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" style="height:644px !important;"> \
<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> \
<p class="currentTextHolder">0/0</p> \
<a href="#" class="pp_arrow_next">Next</a> \
</div> \
<p class="pp_description"></p> \
<div class="pp_social">{pp_social}</div> \
<a class="pp_close" style="margin-top:-596px;" 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: '' /* html or false to disable */
}, pp_settings);
答案 0 :(得分：0)
我发现了问题：
<a id="ModalDiv" href="services.html#inline1" style="display: none;">adasdasdas</a>
<div id="inline_demo" style="width: 800px !important;height:644px !important;display: none;">
替换为：
<a id="ModalDiv" href="inline1" style="display: none;">adasdasdas</a>
<div id="inline1" style="width: 800px !important;height:644px !important;display: none;">