Jquery for Wordpress worked on my localhost but after ulploading the files it stopped working?
I installed Jquery for Wordpress in a Wordpress page in my localhost:
http://localhost/brianfunshine.com2/
Images were properly being displayed in a lightbox
http://alex-chen.net/wordpress/
But when I uploaded the files to a server, Jquery for Wordpress stopped working.
I just uploaded the Wordpress theme and the plugin.
I'm not sure which code to provide.
Please let me know how to solve this.
The code of the link of the image (in this case is a video):
<div><a href="#second2"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" alt="Welcome To High Output" width="220px" height="120px" /></a></div>
<div id="second2" style="display: none;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/N172nW_U39g?fs=1&hl=en_US" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-fl开发者_Python百科ash" width="480" height="385" src="http://www.youtube.com/v/N172nW_U39g?fs=1&hl=en_US" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
EDIT:
The plugin says that it looks by itself for direct links. And it does when I use it from my localhost.
When I upload the files I have to assign the class: "fancybox" to the links in order to make it work.
I don't know Javascript but I think the plugin searches for direct links here:
// Load FancyBox with the settings set
function mfbfw_init() {
$settings = mfbfw_get_settings();
echo "\n"."\n"."<!-- Fancybox for WordPress v". $settings['version'] ." -->"."\n";
?>
<script type="text/javascript">
<?php if ($settings['jQnoConflict']) { ?>jQuery.noConflict();<?php } echo "\n" ?>
jQuery(function(){
<?php // This copies the title of every IMG tag and adds it to its parent A so that fancybox can use it ?>
jQuery.fn.getTitle = function() {
var arr = jQuery("a.fancybox");
jQuery.each(arr, function() {
var title = jQuery(this).children("img").attr("title");
jQuery(this).attr('title',title);
})
}
// Supported file extensions
var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
<?php if ($settings['galleryType'] == 'post') {
// Gallery type BY POST and we are on post or page (so only one post or page is visible)
if ( is_single() | is_page() ) { ?>
jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();
<?php }
// Gallery type BY POST, but we are neither on post or page, so we make a different rel attribute on each post
// (optimized based on sugestions from http://mentalfruition.com/)
else { ?>
var posts = jQuery('.post');
posts.each(function() {
jQuery(this).find(thumbnails).addClass("fancybox").attr('rel','fancybox'+posts.index(this)).getTitle()
});
<?php }
}
The plugins selector is using has(img) to determine if the fancybox class should be added to the link.
var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';
jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();
has(img) is looking for an img tag inside of the link (a tag), not linking to an image as you are doing with the following:
<a href="http://img155.imageshack.us/img155/4065/screenshot2lx.png">click here</a>
It requires something like the following to work automatically:
<a href="http://img155.imageshack.us/img155/4065/screenshot2lx.png"><img src="<thumbnail url>" /></a>
精彩评论