Monitor Reply

Support

Pop out images

Permalink Browser Info Environment August 06, 2014 at 2:38 PM

Hi there,

I was wondering if there is an ability within the theme to click on the images in the slider and have them pop up larger? I was also wondering if the title bar on the photos in the slider could be sized down? They are really large on mobile and my client thinks they cover too much of the image.

Type:	Discussion
Status:	New

jordif replied on Aug 7, 2014 at 10:56 am Permalink Reply

Hi,

the slider does not include a pop-up or lightbox option. However there are a couple of solutions you could try:

1. Using a different add-on such as the "Sortable Fancybox Gallery", which has this option out of the box.

2. Adding the functionality to the slider using Fancybox. An easy way to achieve this would be:

-> Adding fancybox to the page. You can include the fancybox files manually if you feel comfortable editing the theme, or simply install the "Fancybox Links" add-on and add a "Fancybox Links" block to the page where you have the slider (with the default options).

-> Then add an HTML block and paste the following code:

<script>
function fancyBoxMe(e) {
    var target = $('.flexslider .slides li').eq(e).find('img').attr('src');
    $.fancybox({
        href: target
    });
}
$(document).ready(function () {
    $(".flexslider .slides li").each(function (i) {
        $(this).bind('click', function () {
            fancyBoxMe(i);
        });
        $(this).css('cursor','pointer');
    });
});

Viewing 15 lines of 16 lines. View entire code block.

 
<script>
function fancyBoxMe(e) {
    var target = $('.flexslider .slides li').eq(e).find('img').attr('src');
    $.fancybox({
        href: target
    });
}
$(document).ready(function () {
    $(".flexslider .slides li").each(function (i) {
        $(this).bind('click', function () {
            fancyBoxMe(i);
        });
        $(this).css('cursor','pointer');
    });
});
</script>

I have just created a quick demo so you can see:

http://longwayhome.15robots.com/fancybox...

(This has not been thoroughly tested but it should work)

As for the title bar on the photos, go to Dashboard -> Themes -> Long Way Home -> Customize -> Add your CSS, and paste the following code:

.flex-caption, .c5wrapper p.flex-caption {
   font-size: 18px;
   line-height: 18px;
}

(Simply replace 18px with any number you want)

Hope this helps!

Jordi

mobsmarketing replied on Aug 7, 2014 at 12:44 pm Permalink Reply

Thank you so much! Exactly what I needed!

Long Way Home

Support

Pop out images

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post