Title of image instead of icon link portfolio gone

Hi

Just updated NSP5 and it broke my Portfolio custom layout.
https://www.gavick.com/forums/creativit ... 28239.html

I made a backup of the files and uploaded it after the update and the overlay works - but the title is not created anymore
There is just an empty <span></span>?

http://www.hadbergs.dk/frisor/


jQuery(document).ready(function() {
jQuery(document).find('.gkNspPM-Portfolio').each(function(i, module) {
if(!module.hasClass('active')) {
module.addClass('active');
gkPortalModePortfolioInit(module);
}
});
});

var gkPortalModePortfolioInit = function(module) {
// button events
if(jQuery(module).find('.gkLoadMore')) {
module = jQuery(module);
var btn = module.find('.gkLoadMore');
btn = jQuery(btn);
var preloaded = 0;
var maxpreloaded = btn.attr('data-max') * 1;
var pageamount = module.attr('data-cols') * module.attr('data-rows');
var jsondata = btn.attr('data-toload') != null ? JSON.decode(btn.attr('data-toload').replace(/\\\'/g, '&apos;').replace(/\'/g, '"')) : false;
// button
if(btn.attr('data-text') != 'false') {
// add the load area
var loadarea = jQuery('<div class="gkImagesWrapperLoadArea"></div>');
module.append(loadarea);
// add the click event
btn.click(function(e) {
// if there are thumbnails to load
if(preloaded < maxpreloaded && !btn.hasClass('inactive')) {
// prevent the default event
e.preventDefault();
e.stopPropagation();

var prevtext = btn.html();
btn.html('<div class="gkLoader"></div>');
btn.addClass('inactive');

var start = preloaded;
var toInject = [];
for(i = preloaded; i < start + pageamount && i < maxpreloaded; i++) {
var img = new jQuery('<a></a>');
img.attr('href', jsondata[i].link);
img.attr('title', jsondata[i].title);
img.attr('class', 'gkImage active');
img.html('<img src="' + jsondata[i].src + '" alt="' + jsondata[i].title + '" />');
toInject.push(img);
module.find('.gkImagesWrapperLoadArea').append(img);
preloaded++;
}

var imgWrap = module.find('.gkImagesWrapper');
imgWrap = jQuery(imgWrap);
imgWrap.css('height', imgWrap.outerHeight(true) + "px");

var preloaderTimer = setInterval(function() {
var sum = toInject.length;
var loaded = 0;

for(var i = 0; i < sum; i++) {
if(toInject[i].find('img')[0].complete) {
loaded++;
}
}

if(loaded == sum) {

clearInterval(preloaderTimer);
for(var i = 0; i < sum; i++) {

module.find('.gkImagesWrapper').append(toInject[i]);
//toInject[i].inject(module.getElement('.gkImagesWrapper'), 'bottom');
//toInject[i].addClass('show');
gkPortalModePortfolioImgClass(toInject[i], 'show', true, 150, i);


}

btn.removeClass('inactive');

// height animation
imgWrap.animate({
height: imgWrap[0].scrollHeight,
}, 350, function() {
imgWrap.css('height', 'auto');
});

// add overlays
module.find('.gkImage').each(function(i, img) {
img = jQuery(img);
title = img.attr('title');
if(img.find('.gkImgOverlay').length == 0) {
// create overlays
var overlay = jQuery('<div class="gkImgOverlay"></div>');
overlay.html('<span><i>'+title+'</i></span>');
img.append(overlay);
// add overlay events
img.mouseenter( function() {
var overlay = img.find('.gkImgOverlay');
var realImg = img.find('img');
overlay.css({
'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
'width': realImg.width() + "px"
});
overlay.attr('class', 'gkImgOverlay active');
});

img.mouseleave(function() {
var overlay = img.find('.gkImgOverlay');
overlay.attr('class', 'gkImgOverlay');
});
}
});

if(preloaded < maxpreloaded) {
btn.html(prevtext);
} else {
btn.html(btn.attr('data-text'));
}
}
}, 1000);
}
});
}
}

// add overlays
module.find('.gkImage').each(function(i, img) {
img = jQuery(img);
title = img.attr('title');
if(img.find('.gkImgOverlay').length == 0) {
// create overlays
var overlay = jQuery('<div class="gkImgOverlay"></div>');
overlay.html('<span><i>'+title+'</i></span>');
img.append(overlay);
// add overlay events
img.mouseenter( function() {
var overlay = img.find('.gkImgOverlay');
var realImg = img.find('img');
overlay.css({
'margin-left': (-1.0 * (realImg.width() / 2.0)) + "px",
'width': realImg.width() + "px"
});
overlay.attr('class', 'gkImgOverlay active');
});

img.mouseleave(function() {
var overlay = img.find('.gkImgOverlay');
overlay.attr('class', 'gkImgOverlay');
});
}
});
};

var gkPortalModePortfolioImgClass = function(img, className, delay, time, i) {
i = i || 1;

if(!delay) {
img.attr('class', 'gkImage ' + className);
} else {
setTimeout(function() {
img.attr('class', 'gkImage ' + className);
}, time * i);
}
};

Hi

I'm afraid I do not understand. Your site looks very good. Can You please point me to the part which is broken ?

http://www.hadbergs.dk/frisor/#gkBottom1-8

There is no image title when you hover )

Hi

I'm afraid I still do not understand. Either there is no module You refer to on Your site any more or it is displaying for me correctly. Please try clear cache maybe.

Is this the module ?

No that is http://www.hadbergs.dk/frisor/#gkBottom1-1 -

my problem is http://www.hadbergs.dk/frisor/#gkBottom1-8

We have changed this file : modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js to this:
// create overlays
var overlay = jQuery('<div class="gkImgOverlay"></div>');
overlay.html('<span><i>'+title+'</i></span>');

To get the img title to display when you hover - but the span is empty - there is no img title when you hover

One more thing - have also changed controller.php to add text under the image - thats also empty?
// render images
for($i = 0; $i < count($this->parent->content); $i++) {
if($this->get_image($i)) {
if($amount < ($this->parent->config['portal_mode_portfolio_cols'] * $this->parent->config['portal_mode_portfolio_rows'])) {
echo '<a href="'.$this->get_link($i).'" title="'.strip_tags($this->parent->content[$i]['title']).'" class="gkImage animate_queue_element active">';
echo '<img src="'.strip_tags($this->get_image($i)).'" alt="'.strip_tags($this->parent->content[$i]['title']).'" />';
echo '<span style="text-transform:uppercase;">'.$this->parent->content[$i]['title'].'<span>';
echo '</a>';

OK solved!

Somehow the path is changed from :

http://www.hadbergs.dk/frisor/modules/m ... .jquery.js

to:

http://www.hadbergs.dk/frisor/modules/m ... .jquery.js

There is now a /tmpl/ in the path - did'nt se that )

Found the file and changed the code - now it works again