One Page Index Portfolio faliure and Work around attempt
- This topic has 1 reply, 2 voices, and was last updated 3 years, 5 months ago by
. This post has been viewed 1009 times
-
Posts
-
I have been attempting to code out the one page. I was going to use the portfolio to display images but its not allowing me to edit them and if you click any item it says “this content cannot be displayed”. you can click “this content” and it will load the text but its as if the css is missing or not properly filled. In an attempted work aroun i am using the lightbox element that you have included on several pages but now it is forcing the individual lightbox groups into a column structure instead of rows and columns where applicable. if you need any more information please let me know or call at 470-991-1792. below is only the light box code section that I have added. I would much rather use the portfolio if you can tell me how to fix it. THank you
<div class="container py-2"> <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}"> <li class="nav-item active" data-option-value="*"><a href=""#"">Show All</a></li> <li class="nav-item" data-option-value=".kitchenbath"><a href=""#"">Kitchen Baths</a></li> <li class="nav-item" data-option-value=".basementreno"><a href=""#"">Basement Renovations</a></li> <li class="nav-item" data-option-value=".outdoorliving"><a href=""#"">Outdoor Living</a></li> </ul> <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2"> <div class="row portfolio-list sort-destination lightbox" data-sort-id="portfolio" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}"> <div class="col-md-6 col-lg-3 isotope-item outdoorliving"> <div class="lightbox-carousel-item"> <span class="thumb-info thumb-info-lighten thumb-info-no-borders thumb-info-bottom-info thumb-info-centered-icons border-radius-0"> <span class="thumb-info-wrapper border-radius-0"> <img src=""img/project01.png"" alt="""" /> <span class="thumb-info-title"> <span class="thumb-info-inner line-height-1 font-weight-bold text-dark position-relative top-3">Outdoor Living</span> <span class="thumb-info-type"></span> </span> <span class="thumb-info-action"> <a href="portfolio-single-wide-slider.html" </a> <a href=""img/p1/p1i1.jpg""> <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span> </a> <a href=""img/p1/p1i2.jpg""> </a> <a href=""img/p1/p1i3.jpg""> </a> <a href=""img/p1/p1i4.jpg""> </a> <a href=""img/p1/p1i5.jpg""> </a> <a href=""img/p1/p1i6.jpg""> </a> <a href=""img/p1/p1i7.jpg""> </a> <a href=""img/p1/p1i8.jpg""> </a> <a href=""img/p1/p1i9.jpg""> </a> </span> </span> </span> </div> </div> </div> </div> </div> <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2"> <div class="row portfolio-list sort-destination lightbox" data-sort-id="portfolio" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}"> <div class="col-md-6 col-lg-3 isotope-item kitchenbath"> <div class="lightbox-carousel-item"> <span class="thumb-info thumb-info-lighten thumb-info-no-borders thumb-info-bottom-info thumb-info-centered-icons border-radius-0"> <span class="thumb-info-wrapper border-radius-0"> <img src=""img/project02.png"" alt="""" /> <span class="thumb-info-title"> <span class="thumb-info-inner line-height-1 font-weight-bold text-dark position-relative top-3">Kitchen & Bath</span> <span class="thumb-info-type"></span> </span> <span class="thumb-info-action"> <a href=""img/p2/p2i1.jpg""> <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span> </a> <a href=""img/p2/p2i2.jpg""> </a> <a href=""img/p2/p2i3.jpg""> </a> <a href=""img/p2/p2i4.jpg""> </a> <a href=""img/p2/p2i5.jpg""> </a> <a href=""img/p2/p2i6.jpg""> </a> <a href=""img/p2/p2i7.jpg""> </a> <a href=""img/p2/p2i8.jpg""> </a> <a href=""img/p2/p2i9.jpg""> </a> </span> </span> </span> </div> </div> </div> </div> <div class="row portfolio-list sort-destination lightbox" data-sort-id="portfolio" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}"> <div class="col-md-6 col-lg-3 isotope-item basementreno"> <div class="lightbox-carousel-item"> <span class="thumb-info thumb-info-lighten thumb-info-no-borders thumb-info-bottom-info thumb-info-centered-icons border-radius-0"> <span class="thumb-info-wrapper border-radius-0"> <img src=""img/project03.png"" alt="""" /> <span class="thumb-info-title"> <span class="thumb-info-inner line-height-1 font-weight-bold text-dark position-relative top-3">Basement Renovation</span> <span class="thumb-info-type"></span> </span> <span class="thumb-info-action"> <a href=""img/p3/p3i1.jpg""> <span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span> </a> <a href=""img/p3/p3i2.jpg""> </a> <a href=""img/p3/p3i3.jpg""> </a> <a href=""img/p3/p3i4.jpg""> </a> <a href=""img/p3/p3i5.jpg""> </a> <a href=""img/p3/p3i6.jpg""> </a> <a href=""img/p3/p3i7.jpg""> </a> <a href=""img/p3/p3i8.jpg""> </a> <a href=""img/p3/p3i9.jpg""> </a> </span> </span> </span> </div> </div> </div> </div> </div> </div> </div> </div>
Hello, thanks for your purchase.
I’m sorry but I could not understand the question very well, specially when you say that “this content cannot be displayed”.
Regarding the lightboxes, my suggestion is to add a “wrapper” div where you want to create that gallery, for example:
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}"> images links here... </div>That div must be added outside the thumbs with the links for the gallery.
For the first question, please send us more details and the URL of your site so we can understand that better.
Kind Regards.
This topic is marked as "RESOLVED" and can not rceive new replies.