我已经下载并实现了一些jquery代码,可以通过Instagram主题标签在我的网站上创建照片库。我一直在尝试编辑此代码,以便单击图库中的图像显示在灯箱中,而不是按照链接返回到instagram。
我一直使用的灯箱代码是fancybox:http://www.jqueryscript.net/lightbox/Responsive-jQuery-Lightbox-With-Amazing-CSS3-Effects-Fancy-Box-2.html
在我的网站上,为两个Jqueries加载了必要的组件,并且函数运行如下:
<script>
$(document).ready(function(){
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
我在原始图库jquery中找到了链接到instagram的href,并对其进行了编辑,以包含类&#39; ins_popup&#39;像这样:
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';
这似乎不起作用,现在链接只是打开图片的放大版本而不是在fancybox中打开它。我已经毫无问题地对每个组件(fancybox / hashtag gallery)进行了测试,我似乎无法让他们彼此交谈。
相关代码:
<!DOCTYPE html>
<html>
<head>
<title>Embedstagram jQuery Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Include CSS Fies -->
<link href="https://www.googledrive.com/host/0B_9gRWttmryISVpkTGFhVV8yajQ" rel="stylesheet" type="text/css" >
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css">
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include fancybox library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function(){
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin:150px auto 30px auto;">Embedstagram jQuery Plugin Demo</h1>
<div id="embedstagram"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://www.googledrive.com/host/0B_9gRWttmryIbE0yNUJaeHNOQVk"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#embedstagram').embedstagram({
client_id: '6f3244d01df94bb98785d04861561307',
hashtag: '#neverlutionsoundsystem' ,
thumb: 'tile'
});
});
</script>
</body>
</html>
和我编辑过的画廊的Jquery:
/*global jQuery, window*/
(function ($) {
$.fn.embedstagram = function (options) {
var $this = this,
next_url = '';
var settings = $.extend({
client_id: '',
username: '',
hashtag: '#neverlutionsoundsystem',
count: 20,
responsive: true,
load_more: true,
thumb: 'default',
theme: 'default'
}, options);
settings.hashtag = settings.hashtag.replace('#', '');
$this
.addClass('embedstagram')
.addClass('thumb-' + settings.thumb)
.addClass('theme-' + settings.theme)
.append('<ul></ul>')
.append('<a href="#" id="function-button" class="function-button">Loading..</a>');
var $photos = $this.find('ul'),
$button = $this.find('#function-button');
function resize() {
if (settings.responsive) {
var e = $this.width();
var $photo = $('.photo');
if (1024 >= e && e > 768) {
$photo.css({'width': '25%', 'padding-bottom': '25%'});
} else if (768 >= e && e > 570) {
$photo.css({'width': '33.3%', 'padding-bottom': '33.3%'});
} else if (570 >= e && e > 400) {
$photo.css({'width': '50%', 'padding-bottom': '50%'});
} else if (400 > e) {
$photo.css({'width': '100%', 'padding-bottom': '100%'});
} else {
$photo.css({'width': '20%', 'padding-bottom': '20%'});
}
}
}
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';
$photos.append(photo);
return i <= (settings.count);
});
}
function getUrl(user_id) {
var modifier;
if (user_id) {
modifier = 'users/' + user_id;
} else if (settings.hashtag) {
modifier = 'tags/' + settings.hashtag;
}
if (next_url) {
return next_url;
}
return 'https://api.instagram.com/v1/' + modifier + '/media/recent/?&client_id=' + settings.client_id + '&count=' + settings.count;
}
function getPhotos(user_id) {
$button.text('Loading..');
$.ajax({
type: "GET",
dataType: 'jsonp',
url: getUrl(user_id),
success: function (data) {
if (data.meta.error_message) {
var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
$button.text(error_message).addClass('error');
return false;
}
if (!settings.load_more) {
$this.addClass('hide-load-more');
}
$button.text('Load More');
renderPhotos(data);
next_url = data.pagination.next_url;
if (!next_url) {
$button.text('No more images').addClass('disabled');
}
resize();
},
error: function () {
$button.text('Error: unknown').addClass('error');
}
});
}
if (settings.username) {
$.ajax({
type: "GET",
dataType: 'jsonp',
url: 'https://api.instagram.com/v1/users/search?q=' + settings.username + '&client_id=' + settings.client_id,
success: function (data) {
if (data.meta.error_message) {
var error_message = 'Error: ' + data.meta.error_message.toLowerCase();
$button.text(error_message).addClass('error');
return false;
}
if (data.data.length) {
var num_items = data.data.length - 1;
$.each(data.data, function (i, user) {
if (settings.username === user.username) {
var user_id = user.id;
getPhotos(user_id);
return false;
}
if (i === num_items) {
$button.text('Error: no users found').addClass('error');
}
});
} else {
$button.text('Error: no users found').addClass('error');
}
},
error: function () {
$button.text('Error: unknown').addClass('error');
}
});
} else if (settings.hashtag) {
getPhotos();
} else {
$button.text('Error: missing username or hashtag').addClass('error');
}
$button.click(function (e) {
e.preventDefault();
if (!$(this).is('.disabled, .error')) {
getPhotos();
}
});
$(window).on('load resize', resize);
};
}(jQuery));
如果您需要查看任何其他代码,请询问!任何帮助都非常感谢,因为您可能已经猜到了 - 我对这一切都是新手
谢谢!
答案 0 :(得分:0)
当您调用fancybox时,图像可能尚未加载到DOM。在图像加载后调用fancybox插件,而不是在$(document).ready();
上compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
此外,我在您的示例网站中看到您已在页面中包含两次jquery
function renderPhotos(data) {
$.each(data.data, function (i, photo) {
photo = '<li class="photo"><a href="' + photo.images.standard_resolution.url.replace(/\\/, "") + '" class= "ins_popup"><img src="' + photo.images.standard_resolution.url.replace(/\\/, "") + '"></a></li>';
$photos.append(photo);
return i <= (settings.count);
});
$(".ins_popup").fancybox({
openEffect : 'fade',
closeEffect : 'fade'
});
}
删除第二个Jquery包含。这可能是个问题。