Thumbnails missing in Slideshow (js bug)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Thumbnails are not rendering in a Fancybox gallery.

http://southardremodeling.com/portfolio/parsonage/

I need a javascript fix to eliminate the display: none;

CSS begins at line 1997

.main_wrapper #project_controls_container {
width: 100%;
padding: 0;
margin: 0 auto 60px auto;
}

HTML showing js added display:none

<div id="project_controls_container">
<ul id="project_display" style="display: none;">
<li id="project_control_544" class="slide_control" data-slide="544">

I don't see the display: none. Is it fixed? Also, I don't see any color desaturation of the images.
LayZee over 2 years ago
It is fixed. Thank you. I can't get the main slider on the homepage to appear in color on mobile devices. Any last thoughts before I mark your solution?
simpletwist over 2 years ago
awarded to haqe321

Crowdsource coding tasks.

2 Solutions

Winning solution

Place the #project_display in css and use javascript to get rid of display:none by using the code below.

CSS Code = #project_display{

display:none;

}

Javascript Code = document.getElementById("project_display").style.display = "inline";

I think I have it solved by removing a .hide in the main.js. As an aside, I did not develop the theme but I'm trying to figure out if the images are desaturated via CSS or JS. I would like to eliminate the desaturation on mobile devices and any additional thoughts would be helpful.
simpletwist over 2 years ago
You could place filter:none in the css of the image, although I can't properly explain why it has helped me in the past. Hope this is of use.
haqe321 over 2 years ago
Thank you for your solution. @media only screen and (max-width: 767px) and (min-width: 320px) .mainwrapper #homeslides .slide_container img{ width:100% !important; height:auto !important; filter: none; } No luck so far with the CSS. This would be the right targeted class, correct?
simpletwist over 2 years ago

Make your home page slides appear in color on small and medium touch screens - add this CSS:

@media screen and (orientation: portrait) and (max-width: 840px),
screen and (orientation: landscape) and (max-width: 1280px) {
    .touchevents .slide_image.hm-hover {
        opacity: 1 !important;
    }
}
Perfect. Thank you.
simpletwist over 2 years ago
View Timeline