-
Posts
-
Hi,
Just insert a Featured Image, it will automatically add lightbox effect when click.
Regards,
Ismael
Hi,
That what I do, but it doesn’t work… as you can see here : http://www.juls.ch/studios/lost/ no lightbox effect on my featured image…
Jul
Try following – in wp-contentthemesenfoldincludeshelper-post-format.php replace:
$prepend_image = get_the_post_thumbnail(get_the_ID(), 'large');with
$linkimg = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
$prepend_image = get_the_post_thumbnail(get_the_ID(), 'large');
$prepend_image = '<a href="'.$linkimg.'">'.$prepend_image.'</a>';I have tried, the image have a link icon on mouse over but the link is “array” and open a page not found…
Hi,
Open loop-index.php then find this code
echo "<div class='".implode(" ", get_post_class('post-entry post-entry-type-'.$post_format . " " . $post_class . " ".$with_slider))."'>";
//default link for preview images
$link = get_permalink();
//on single page replace the link with a fullscreen image
if(is_singular())
{
$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');
}
//echo preview image
if(strpos($blog_style, 'big') !== false)
{
if($slider) $slider = '<a href="'.$link.'">'.$slider.'</a>';
if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
}Replace it with:
echo "<div class='".implode(" ", get_post_class('post-entry post-entry-type-'.$post_format . " " . $post_class . " ".$with_slider))."'>";
//default link for preview images
$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');;
//on single page replace the link with a fullscreen image
if(is_singular())
{
$link = avia_image_by_id(get_post_thumbnail_id(), 'large', 'url');
}
//echo preview image
if(strpos($blog_style, 'big') !== false)
{
if($slider) $slider = '<a href="'.$link.'" rel="lightbox">'.$slider.'</a>';
if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
}Please try this one. Reset Dude’s code first. Remove browser cache then reload the page.
Regards,
Ismael
Hi,
Have you assigned the News page to be the blog in Enfold > Theme Options? http://www.clipular.com/c?6941003=Gaw-5mtW4pH-GEOD9ZyE_T_op9A&f=.png
Are your settings in Settings > Reading (front page display) http://www.clipular.com/c?6919054=JosRzTZUT-5OncFDyuys04CjGFI&f=.png (top part) the same as here?
How are you creating the individual image page? This one http://www.juls.ch/studios/lost/ ?
—-
You are setting the post as Format “image”.. Save it as : format: Regular. .. I think the image format does what it says, it displays the entire image.
Also don’t forget that you can add the Advanced Layout option to posts as well, and that way you can add a slider in there or a gallery, so that way you will see the thumbnail first.
Thanks,
Nick
Hi,
Yes
Yes
This is a simple blog post…
—
Ok, but if I save it as regular, I have to insert my image in the post, and if I do that, my image is small! (it happens only with full width display “no sidebar”, if I use a sidebar, no problem!) I see now why you don’t have an example without sidebar ;o)
I’ve tried to set the news page as a normal page (not setting as blog page in settings) and use the advanced template builder to use blog post with “read more” links, but read more links don’t works…
I’m sorry but I’ve many many probleme with blog elements on full width, I don’t understand why.
Thx
Jul
Ok, I’ve tried to do otherwise.
If you see http://www.juls.ch/studios/lost :
Safari 6 and Chrome for MAC : image as the same width as the text
Ok for me but how can I have the same width post without sidebar as the post with sidebar ?? Because the image is smaller than I had a sidebar…
Firefox for MAC : Th image has is orgininal size…
I don’t understand anything…
And last problem (only Chrome and Safari for MAC, not Firefox for MAC), as you can see, on mouse over the image there is a flashing effect on socket and header. On my contact page I have the same problem on mouseOver the contact form, flickering on footer, but only with sidebar, without sidebar I don’t have this effect…
I can’t use the theme correctly without sidebar…
Jul
Hi,
You can use the theme correctly with sidebar or without. Just a matter of tweaking it with CSS since there is no way to create such a robust theme that’s one-size fits all, without a few adjustments to meet individual expectations. But then again, that’s why I am here. :)
Please add this to your /css/custom.css
#top.single .fullsize .template-blog .post .entry-content > *, #top.single .fullsize .template-blog .post .entry-content {
max-width:990px !important;
}If 990px is too small, set it at 1100 but 990 seems to be the size of your image.
Thanks,
Nick
Nick you’re hero of the day! :o) That’s only what I needed!
Sorry for my explanations, my english is not (always) good ;o)
Just the last prob for me is the flickering effects with background that I had mentioned on Safari and Chrome. That’s a minor problem for me but it was mentioned also here : https://kriesi.at/support/topic/alternate-background-image-flickering-black-when-window-resize you can close my post and I’ll take a look on this one.
Thanks!
Jul…
Hi,
See above I amended my answer once I remembered about the flickering.
The fixed directive seems to be causing it.
Thanks,
Nick
For your answere about my custom.css
.socket_color, .footer_color, .alternate_color, .container_wrap_logo, .main_color {
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
background-attachment: fixed, fixed;
}That’s the way for CSS3 multiples background, here I have 2 backgrounds, an SVG who is 100% height and 100% width, and a .png with repetition (under the SVG). No repeat is for the SVG and repeat is for the .png.
I use this from long time, it’s work fine, for example with your Choices theme. I have only this phenomenon in Enfold on Safari and Chrome…
Thx
Jul
Hi,
I played around with it. I broke it up into individual parts so it’s easier to handle. Please try these blocks . I took off fixed on the blocks that don’t need it.
.main_color{
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
background-attachment: fixed, fixed;
}
.container_wrap_logo{
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
}
.alternate_color{
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
}
html {
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
}
.socket_color{
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
}
.footer_color{
background-image: url(../../../../../img/background.svg), url(../../../../../img/background_dark.png);
background-size: 100% 100%, auto;
background-position: left top, left top;
background-repeat: no-repeat, repeat;
}Thanks,
Nick
Hi,
Same problem with this syntax, but without fixed blocks, the backgrounds blocks works individually and not like a single big background.
You can see the result http://www.juls.ch/studios/lost/
Thx
Jul…
Hi,
I’ve just played with it. The phenomenon is the same without any background image.
You can compare this page : http://www.juls.ch/studios/contact/ (put you mouse on the contact form and look the socket)
with this one http://www.juls.ch/studios/test/ (same test)
You cn see the phenomenon only with sidebar on contact form page, but always on other pages with mouseover effect like lightbox for example… tested without any background images, same prob. Strange! All this only in webkit (Chrome and Safari MAC, not tested on Windows)
Thx
Jul
Hi,
I think I found the problem. Please add this
.alternate_color{
z-index: 0;
}
#socket {
margin-top: 0px;
z-index: 0;
}If this same behavior happens elsewhere, please let us know. I tested on Chrome on Windows 7, and flashing on hover goes away.
Thanks,
Nick
Hi Nick,
Perfect! The flashing has disappeared from socket in all browsers MAC.
Only remained a flashing effect on image mouseover and social bookmark’s menu, you can see on this page
http://www.juls.ch/studios/lost
But ONLY on Safari MAC. That’s not really a problem for me.
Thank you very much.
Jul
Hi,
Yeh but I might as well fix it now, since I think someone else was having similar issues. Take a look at this http://www.clipular.com/c?6670240=aAcJ4A5wjk1ywtQN18G_hoONHTU&f=.png
Is the part where the menu and logo are located supposed to be like that ? the background i mean. Can you post a snapshot what you consider correct, when logo becomes small?
Please see if this does anything
.avia_textblock, .avia-icon-list, .avia-button, .avia-testimonial, .iconbox, .avia_message_box, .avia-team-member, .widget, .post, .team-img-container img, .team-social, .iconlist_icon, .fallback-post-type-icon, .fullsize .related_posts, .grid-image, .avia-caption-content, .avia-caption-title, .entry-content {
-webkit-backface-visibility: visible !important;
}Thanks,
Nick
Hi,
Yes no problem.
So the flashing effect is on this area :
http://www.juls.ch/studios/medias/Capture-d’écran-2013-05-30-à-13.26.56.png
and on images (only if have a lightbox effect link)
http://www.juls.ch/studios/medias/Capture-d’écran-2013-05-30-à-13.26.46.png
So on this page : http://www.juls.ch/studios/lost when you put your mouse over the image, the flashing effect appear on the two area mentionned above. But only in Safari for MAC (not verified on Windows).
Thanks to you for your work.
Jul
Hi,
Ya that’s the problem. Apple for some reason discontinued Safari for Windows a year ago, making it difficult to see what’s going on. If this issue is not a major discomfort, please hang on till i get a chance to see it on an Apple device since on Windows i don’t see any blinking on any browser (ie.ff.ch)
Thanks,
Nick
Hi,
No problem, thank you Nick.
Once again, thank you for your support! Great themes, great team, great work!
Best regards,
Jul
- The topic ‘Lightbox on preview images…’ is closed to new replies.