Forum Replies Created
-
Posts
-
Hi!
It works like a charm now, thanks for another great update! I just updated the files displayed in “Version.txt” since I’ve made some custom changes, and the header was not on the list for 2.6.2.
Regards,
TomasHi!
Ah, thanks, that solved it! I’ve must have missed 2.6.2. But another menu problem occurs now on my desktop computer (both IE and Chrome). The menu is displayed vertically on the right side instead of where it used to be. And the header is not fixed (or sticky as it seems to be called now).
Regards,
TomasI got help with that, in header.php, just before </head>, I’ve added:
<script>
// On window load. This waits until images have loaded which is essential
jQuery(window).load(function(){// Fade in images so there isn’t a color “pop” document load and then on window load
jQuery(“.isotope img”).fadeIn(500);// clone image
jQuery(‘.isotope img’).each(function(){
var el = jQuery(this);
el.css({“position”:”absolute”}).wrap(“<div class=’img_wrapper’ style=’display: inline-block’>”).clone().addClass(‘img_grayscale’).css({“position”:”absolute”,”z-index”:”998″,”opacity”:”0″}).insertBefore(el).queue(function(){
var el = jQuery(this);
el.parent().css({“width”:this.width,”height”:this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});// Fade image
jQuery(‘.isotope img’).mouseover(function(){
jQuery(this).parent().find(‘img:first’).stop().animate({opacity:1}, 1000);
})
jQuery(‘.img_grayscale’).mouseout(function(){
jQuery(this).stop().animate({opacity:0}, 1000);
});
});// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement(‘canvas’);
var ctx = canvas.getContext(‘2d’);
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>Im finally done with my companys new site. Many thanks goes out to the Enfold support team for all the help along the way! Really great value for the money!
Most customization is on the portfolios (“VÅRA PROJEKT” and “MEDARBETARE”), we were looking for a fast way of viewing the portfolios, so we use only the ajax preview and don’t have any link to a single portfolio page. This way we get a fast navigation without having to switch a page. Some customization was also done though Codeable, such as widening the page and the black and white effect on the portfolios.
Hi again!
I found the problem. In the Chrome advanced settings, I unchecked “Use hardware acceleration when available”.
Best regards,
TomasHi!
I happens on both my computers, though both is with Win7 and Chrome, it’s ok on IE. And it only happens when I “grab” the scroller and push it down and then up again. When I use the arrow to scroll, there is no problem. So I guess it’s not a really big issue, but still a bit irritating… :)
Best regards,
TomasIt works now, thank you very much! Great support as always here.
One question though, when the next theme update comes, do I still just have to use the code in this post: https://kriesi.at/support/topic/remove-lightboxlink-from-ajax-preview-slider-again/#post-199447?
Hi again!
No difference Im afriad. I have cleared chache and reloaded but Im still not able to click to switch image.
Regards,
TomasThat removed the link… but unfortunately it also removed the possibility to switch between images in the slider, both with the arrows and with the circles at the bottom of the slider… :)
Hi!
That code removes the lightbox and don’t cause any problems with the slider. But the slider images is still a link (opens up in a new window). I would like the link to be removed completely.
Regards,
TomasI think I solved it myself!
In functions.php, I changed the following:
$avia_config[‘imgSize’][‘gallery’] = array(‘width’=>845, ‘height’=>684 ); // images for portfolio entries (2,3 column)
to
$avia_config[‘imgSize’][‘gallery’] = array(‘width’=>900, ‘height’=>675 ); // images for portfolio entries (2,3 column)
Just under I also found this:
$avia_config[‘imgSize’][‘entry_with_sidebar’] = array(‘width’=>845, ‘height’=>321); // big images for blog and page entries
Changed the width there to 900 too, I don’t really know which one Im using, gallery or “entry with sidebar”?.
Hi!
It worked when I deleted the item and created a new one with the same images, strange. Thanks for the help! Im going to try find out what custom change caused the first problem with sliders turning into images now. Topic can be closed.
Regards,
TomasHi!
Sorry if I was i bit unclear (my last post was a little back and fourth):
* I think i found the source for the problem with the slider turning into images. It was becuase of my custom changes, I haven’t had time to figure out which one yet.
* My problem now is that without all custom changes, there’s still a problem with the image sizes. As you can see, the size of the slider for “HÖGDALEN” is diffrent from the other portfolio sliders, even though the images are uploaded the same size.
The only custom change right now is: .page-id-165 .portfolio-preview-image { width: 75%; }Regards,
TomasHi again!
I tried deactivating all the plugins without result (see further down though for the possible problem). I found a kind of a workaround that I’ll think will be ok for the image size problem. The problem with the image size is that when the slide isn’t loaded, the “.portfolio-preview-image” isnt applied on the images, instead it’s “div .portfolio-preview-image .avia-slideshow img”. So I added a “width: 900px” for that in quick CSS (I tried with 75% first, but that resulted in 75% of 75% on all images). I don’t think I destroyed any responsivity, not what I’ve noticed so far.
The problem with the slider not showing is still a problem though, it seems to occur when you click forward (next portfolio) and then go back one portfolio again. I disabled all plugins, removed all custom css (except .page-id-165 .portfolio-preview-image { width: 75%; }) and removed all other custom changes I’ve done. The slider error is corrected then (I guess it have something to do with my other custom changes), but there’s still not quite right with the image sizes (the solution above don’t apply since it’s still a slider now). Most portfolios have the correct size (about 900px in width). The portfolio “HÖGDALEN” though, have a width of about 880px. Not much differ, but it’s still notable and it’s very strange since there’s nothing special with that portfolio. It has the same settings and the same image size.
The site is now without all the changes, so you can look at that portfolio item (Högdalen) and compare it to the others.
Regards,
TomasHi!
I don’t know if this have been suggested before, but I would like to have the Enfold template builder in the ajax preview section, so when creating my custom look for the ajax preview, I don’t have to use shortcodes.
Best regards,
TomasHi!
I changed my mind and now Im aiming for about 900px in width, and therefore I set the width to 75% which looks good. The problem still exists though, it seems that the slider isn’t loaded correctly all the time. When I switch trough the portfolios the error occurs now and then (unfortunately too often), it looks like this:
As you see, instead of being a slider, the images just line in a row, and that’s whats causing the image size to be wrong too.
Since it don’t happen everytime, it’s difficult to track. Any ideas what can cause the problem (ajax not loading properly?) or how I can find out? The problem occurs on diffrent computers, so it’s not user related. Try for yourself and click trough the portfolios (sometimes it happens directly, sometimes only after a while), going both back and fourth with the arrows.
Regards,
TomasHi!
Thanks for the help, that worked! Any chance of implementing the Enfold template builder into the ajax preview section (right now I have to use shortcodes if I want to make a custom layout)?
Regards,
TomasThat worked perfectly, thanks for a really quick response!
Im learning the more advanced CSS more and more, I have before only worked with simple div:s. So just for my learning, if I’d write only this:
.entry-content-header {
width: 200px;
}Then it wouldn’t have worked? Is your code saying: “In portfolio-preview-content, change the width for entry-content header”? Or is it saying “Change the width for both for portfolio-preview-content and entry-content header”?
Hi!
Thanks, now it works for me! Im not exactly sure how you intented me to use it, but this combination worked for me:
#header_main .container {
height: 78px!important; line-height: 78px!important; }.main_menu ul:first-child > li > a { height: 78px!important; line-height: 78px!important; }
And ofcourse 78 bening the value I wanted to reduce the height to.
Hi!
Im trying to do the same thing and have the same problem. When adjusting the header, the menu drop downs also get that height.
When using only this:
#header_main .container {
height: 78px!important; line-height: 78px!important; }The header is smaller, but the drop down menus have a little space between the menu and them.
When using this:
.main_menu ul:first-child > li a, #header_main .container {
height: 78px!important; line-height: 78px!important; }The header is smaller, but the drop downs have the same height making the menus pretty big and ugly.
You can have a look here;
http://i.agarkitekter.se/
Username: test
Password: testRight now the second alternative is active (big drop down menus).
Best regards,
Tomas
