I'm using Drupal 7.0 and Views 3 module. And my pager setting: Views Load More.
And i listing my thumbnail images via this extensions. Like this:
My thumbnail get number, mouseout shadow and hover jQuery effect. I added this codes in main.js and view_load_more.js
Hover code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
Number code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
View Load More js:
/**
* @file views_load_more.js
*
* Handles the AJAX pager for the view_load_more plugin.
*/
(function ($) {
/**
* Provide a series of commands that the server can request the client perform.
*/
Drupal.ajax.prototype.commands.viewsLoadMoreAppend = function (ajax, response, status) {
// Get information from the response. If it is not there, default to
// our presets.
var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper);
var method = response.method || ajax.method;
var effect = ajax.getEffect(response);
// We don't know what response.data contains: it might be a string of text
// without HTML, so don't rely on jQuery correctly iterpreting
// $(response.data) as new HTML rather than a CSS selector. Also, if
// response.data contains top-level text nodes, they get lost with either
// $(response.data) or $('<div></div>').replaceWith(response.data).
var new_content_wrapped = $('<div></div>').html(response.data);
var new_content = new_content_wrapped.contents();
// For legacy reasons, the effects processing code assumes that new_content
// consists of a single top-level element. Also, it has not been
// sufficiently tested whether attachBehaviors() can be successfully called
// with a context object that includes top-level text nodes. However, to
// give developers full control of the HTML appearing in the page, and to
// enable Ajax content to be inserted in places where DIV elements are not
// allowed (e.g., within TABLE, TR, and SPAN parents), we check if the new
// content satisfies the requirement of a single top-level element, and
// only use the container DIV created above when it doesn't. For more
// information, please see http://drupal.org/node/736066.
if (new_content.length != 1 || new_content.get(0).nodeType != 1) {
new_content = new_content_wrapped;
}
// If removing content from the wrapper, detach behaviors first.
var settings = response.settings || ajax.settings || Drupal.settings;
Drupal.detachBehaviors(wrapper, settings);
if ($.waypoints != undefined) {
$.waypoints('refresh');
}
// Set up our default query options. This is for advance users that might
// change there views layout classes. This allows them to write there own
// jquery selector to replace the content with.
var content_query = response.options.content || '.view-content';
// If we're using any effects. Hide the new content before adding it to the DOM.
if (effect.showEffect != 'show') {
new_content.find(content_query).children().hide();
}
// Add the new content to the page.
wrapper.find('.pager a').remove();
wrapper.find('.pager').parent('.item-list').html(new_content.find('.pager'));
wrapper.find(content_query)[method](new_content.find(content_query).children());
if (effect.showEffect != 'show') {
wrapper.find(content_query).children(':not(:visible)')[effect.showEffect](effect.showSpeed);
}
/** thumbnail number **/
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
/** thumbnail number end **/
var shadowImg = '<div class="shadow"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).append(shadowImg);
});
});
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
// Attach all JavaScript behaviors to the new content
// Remove the Jquery once Class, TODO: There needs to be a better
// way of doing this, look at .removeOnce() :-/
var classes = wrapper.attr('class');
var onceClass = classes.match(/jquery-once-[0-9]*-[a-z]*/);
wrapper.removeClass(onceClass[0]);
var settings = response.settings || ajax.settings || Drupal.settings;
Drupal.attachBehaviors(wrapper, settings);
}
/**
* Attaches the AJAX behavior to Views Load More waypoint support.
*/
Drupal.behaviors.ViewsLoadMore = {
attach: function (context, settings) {
if (settings && settings.viewsLoadMore && settings.views.ajaxViews) {
opts = {
offset: '100%'
};
$.each(settings.viewsLoadMore, function(i, setting) {
var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a';
$(view).waypoint(function(event, direction) {
$(view).waypoint('remove');
$(view).click();
}, opts);
});
}
},
detach: function (context, settings, trigger) {
if (settings && Drupal.settings.viewsLoadMore && settings.views.ajaxViews) {
$.each(settings.viewsLoadMore, function(i, setting) {
var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a';
$(view, context).waypoint('destroy');
});
}
}
};
})(jQuery);
All jQuery effects is working. But when i click Load More button, next thumbnails working normal but jQuery effects seen twice previous thumbnails.
Like this:
What's problem?
