Title of image instead of icon link portfolio

I found this under Wordpress Creativity:

http://www.gavick.com/forums/creativity ... 27143.html

Can this be done in Joomla?

Please send me a PM with:
1. URL to your website
2. ftp data (host, user, password)
3. link to this thread

Changes are almost same, only files and classes differ:

Please edit:
modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js
and replace:

Code: Select all

   // add overlays
   module.find('.gkImage').each(function(i, img) {
      img = jQuery(img);
      if(img.find('.gkImgOverlay').length == 0) {
         // create overlays
         var overlay = jQuery('<div class="gkImgOverlay"></div>');
         overlay.html('<span></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');
         });
      }
   });


with:

Code: Select all

   // 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');
         });
      }
   });


This will add caption to overlay.

To correct css stuff, please edit:
templates/gk_creativity/css/gk.stuff.css

and replace:

Code: Select all

.gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay > span:before {
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #fff;
   content: "\f0c1";
   font-family: FontAwesome;
   font-size: 22px;
   height: 52px;
   left: 50%;
   line-height: 50px;
   margin: -32px 0 0 -32px;
   opacity: 0; filter: alpha(opacity=0);
   position: absolute;
   text-align: center;
   top: 65%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 52px;
}


with:

Code: Select all

.gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay > span > i {
   color: #fff;
   font-size: 22px;
   height: 52px;
   line-height: 50px;
   margin: -32px 0 0 0;
   left: 0px;
   opacity: 0; filter: alpha(opacity=0);
   position: absolute;
   text-align: center;
   top: 65%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 100%;
}


and:

Code: Select all

.gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay.active span:before {
   opacity: 1; filter: alpha(opacity=100);
   top: 50%;
}


with:

Code: Select all

.gkNspPM-Portfolio .gkImagesWrapper > a > .gkImgOverlay.active span i {
   opacity: 1; filter: alpha(opacity=100);
   top: 50%;
}


I have changed the code, but its still the same....

In Firebug i can see that the <i></i> is missing. Some how its not rendered?

And the icon is still produced?

If I force remove the icon with Firebug and edit the <span> with <i></i> its working?

If You have made changes to this file:
modules/mod_news_pro_gk5/portal_modes/portfolio/script.jquery.js
please check if its new version is loading, if not, clear cache or force full reload of the page.

Have tried a full page reload. It's not loading the new script, because there is no <i></i> tags...And it still loads the icons...

Here is my script file:

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.scrollTop(),
}, 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);
}
};

Now I see - You use mootools instead of jQuery on your page... Let me think a minute...

/modules/mod_news_pro_gk5/portal_modes/portfolio/script.mootools.js
Replace:

Code: Select all

   // add overlays
   module.getElements('.gkImage').each(function(img) {
      if(!img.getElement('.gkImgOverlay')) {
         // create overlays
         var overlay = new Element('div', { 'class' : 'gkImgOverlay' });
         overlay.innerHTML = '<span></span>';
         overlay.inject(img, 'bottom');
         // add overlay events
         img.addEvent('mouseenter', function() {
            var overlay = img.getElement('.gkImgOverlay');
            var realImg = img.getElement('img');
            overlay.setStyles({
               'margin-left': (-1.0 * (realImg.getSize().x / 2.0)) + "px",
               'width': realImg.getSize().x + "px"
            });
            overlay.setProperty('class', 'gkImgOverlay active');
         });
         
         img.addEvent('mouseleave', function() {
            var overlay = img.getElement('.gkImgOverlay');
            overlay.setProperty('class', 'gkImgOverlay');
         });
      }
   });
};


with:

Code: Select all

   // add overlays
   module.getElements('.gkImage').each(function(img) {
      if(!img.getElement('.gkImgOverlay')) {
         // create overlays
         title = img.getProperty('title');;
         var overlay = new Element('div', { 'class' : 'gkImgOverlay' });
         overlay.innerHTML = '<span><i>'+title+'</i></span>';
         overlay.inject(img, 'bottom');
         // add overlay events
         img.addEvent('mouseenter', function() {
            var overlay = img.getElement('.gkImgOverlay');
            var realImg = img.getElement('img');
            overlay.setStyles({
               'margin-left': (-1.0 * (realImg.getSize().x / 2.0)) + "px",
               'width': realImg.getSize().x + "px"
            });
            overlay.setProperty('class', 'gkImgOverlay active');
         });
         
         img.addEvent('mouseleave', function() {
            var overlay = img.getElement('.gkImgOverlay');
            overlay.setProperty('class', 'gkImgOverlay');
         });
      }
   });
};


PS - I dont know mootools at all, so if it will not work, Ill ask our developers for it.

Ok didn't know about Jquery vs Mootools settings

Changed the settings:

News Show Pro/Options/External Files/

Use default css: off
Use javascript framework: jquery
Include jquery framework: off

Now it works

Thanks a lot - thumbs up

Havent You checked that mootools code? I was wondering if it will work correctly

Either case. I'm glad I could help .

Hi!

I applied these changes to a (local host) Joomla 3.2 quickstart (your latest version), just to try it out. When I click on "what we do" the first set of images that appears does not show the title as an overlay (only the color overlay, no text, no icon). When I then click on "more work" and call up the next set of images, those images now display the title overlay correctly, while the first set of images above still doesn''t show anything.

What do I have to do to get the first set of images that initially loads to show the title overlay as well?!

Thanks!

Sorry, but without access to a live site, I cant help you much. Perhaps you have place code in wrong place, or you use more recent template where the code needs to be altered.