Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #23844

    Hi,

    How can I add a lightbox effect on big preview images on single entry?

    Thx

    Jul

    #121336

    Hi,

    Just insert a Featured Image, it will automatically add lightbox effect when click.

    Regards,

    Ismael

    #121337

    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

    #121338

    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>';

    #121339

    I have tried, the image have a link icon on mouse over but the link is “array” and open a page not found…

    http://www.juls.ch/studios/lost/

    #121340

    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

    #121341

    Hi Ismael,

    Not better… lost the link again, nothing happens…

    H E L P :o)

    Best regards

    Jul

    #121342

    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

    #121343

    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

    #121344

    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

    #121345

    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

    #121346

    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 : http://www.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…

    #121347

    Hi,

    See above I amended my answer once I remembered about the flickering.

    The fixed directive seems to be causing it.

    Thanks,

    Nick

    #121348

    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

    #121349

    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

    #121350

    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…

    #121351

    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

    #121352

    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

    #121353

    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

    #121354

    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

    #121355

    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

    #121356

    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

    #121357

    Hi,

    No problem, thank you Nick.

    Once again, thank you for your support! Great themes, great team, great work!

    Best regards,

    Jul

    #121358

    Thanks and enjoy the theme. If you run into problems we are always here.

    Good luck,

    Nick

Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘Lightbox on preview images…’ is closed to new replies.