Pop out images

Permalink Browser Info Environment
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
View Replies:
jordif replied on at Permalink Reply
jordif
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');
    });
});


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 at Permalink Reply
Thank you so much! Exactly what I needed!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.