Попробовали несколько вариантов, не повезло. Я использую jQuery 1.9.1
Вот мой код функции:
(function ($) {
$.fn.createGallery = function(options) {
var theObject = $(this);
var settings = $.extend({
// These are the defaults.
server: 'http://localhost/jQuery%20Gallery/images/galleries/',
galleryName: 'Test',
galleryWidth: 800,
galleryImageMargin: 20,
galleryImageColumns: 2,
galleryTargetFolder: 'homepage_gallery',
imageQuality: 100
}, options);
var galleryImageWidth = settings.galleryWidth / settings.galleryImageColumns;
var imageUrl = settings.server+settings.galleryTargetFolder;
var otherMargin = Math.round(settings.galleryImageMargin / 2);
var finalImageWidth = Math.round(galleryImageWidth - settings.galleryImageMargin);
var finalImageHeight = Math.round(galleryImageWidth / 1.4);
var finalGalleryWidth = settings.galleryWidth - settings.galleryImageMargin;
$(this).before('<style>'+$(this).selector+' li:nth-child('+settings.galleryImageColumns+'n+1) { margin-left: 0; } '+$(this).selector+' li:first-child { margin-left: 0; } '+$(this).selector+' { width: '+finalGalleryWidth+'px; margin: 0px; } '+$(this).selector+' li { display: inline-block; list-style: none; margin-left: '+settings.galleryImageMargin+'px; margin-bottom: '+otherMargin+'px; } </style>');
$.ajax({
url: imageUrl,
success: function(data){
var extension = '.jpg';
$(data).find("a:contains("+extension+")").each(function(){
// will loop through
var filename = $(this).attr("href");
$('<li></li>').html('<a href="'+imageUrl+'/'+filename+'" class="fancybox"><img src="thumbnail.php?src='+imageUrl+'/'+filename+'&q='+settings.imageQuality+'&h='+finalImageHeight+'&w='+finalImageWidth+'"/></a>').appendTo(theObject);
});
}
});
};
}(jQuery));
Это называется так и отлично работает: HTML: <ul id="images"></ul>
JQuery:
$('#images').createGallery({
server: 'http://localhost/jQuery%20Gallery/images/galleries/',
galleryName: 'Test',
galleryWidth: 800,
galleryImageMargin: 20,
galleryImageColumns: 2,
galleryTargetFolder: 'homepage_gallery',
imageQuality: 100
});
Теперь, что я хочу сделать, это добавить класс к новым элементам, чтобы я мог настроить их в ie8, чтобы добавить к нему класс. Я пробовал это:
$(document).on('DOMNodeInserted', function(e) {
$(e.target).addClass('triggerMargin');
});
Который я разместил в нижней части функции, и он отлично работает в firefox и chrome и т.д., Но он полностью игнорируется в ie8. Есть идеи?
Это было исправлено, выполнив следующие функции: theObject.children('li:nth-child(2n+1)').addClass('triggerMargin');
где theObject
равен $(this)
для объекта, который предназначен для добавления к нему класса.
:nth-child
;)