Can't disable thumbnail previews in .css (or maybe PHP)

Posted on 2013-02-01
Medium Priority
Last Modified: 2013-03-02
I have a WordPress page I am working on http://flyingarrowmontana.com .  The theme we bought for the customer came with thumbnails on of images along the bottom of the homepage that when selected changed the background image.  After we completed the basics the customer decided they would like it more if the background images were a slideshow and the thumbnails were gone.  I figured it would be easy to get rid of them thumbnails, and maybe a little harder to do the slideshow.

Ironically, the slideshow was really simple and I got it working with no trouble.  I was also able to get rid of a loading bar that came up every time the imaged changed easily enough.  But for the life of me I can't get rid of the thumbnails (without breaking things).

I can disable all the JavaScript related to them and it removes the animation and such leaving just the images (which then just link to the image page instead of changing the background) but that doesn't help me out.  I found in the style.css file #previewHolder which as far as I can tell ONLY applies to those images.  But when I comment it out it breaks the entire page.

If I use firebug and look at the page I can find the html code for the thumbnails and remove it, which works perfectly.  Unfortunately I don't know where in the php files I need to go to remove whatever is the equivalent code (or css or JavaScript).  Using firebug you can also go into the style.css and see the errors that appear when you remove all the #previewHolder sections.

I'm sure this is an easy thing to fix, but I can't for the life of me figure it out.  Thanks for the help.
Question by:mjburgard
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2

Accepted Solution

mjburgard earned 0 total points
ID: 38845727
Ok well I might have done it.  In the main.js JavaScript file I found two lines calling #previewHolder.  I commented out those lines without commenting out any of the style.css code or any of the JavaScript code in the actual Gallery.js file.  It seems to be working with no ill effects for now.

Interestingly, when I view the page source with FireBug the html code that calls preview holder is still there.  So I think my solution, while working, is not really the best way to do it.   Would still love for some help on a better way to do this if there is one (sadly you will now get the site with the thumbnails gone, so it will be a little harder to trouble shoot, but I need to leave it like this so the customer is happy).
LVL 13

Expert Comment

ID: 38846702
That's right. Calling code doesn't go away because what it calls has gone away. Depending on the environment, the fix of removing the called thing can generate an error message. You can delete css without generating an error message. Deleting js or php code and then calling it will generate an error message. There is nothing in php that would govern the slideshow or hover activity. These are js and css activities. If you find the html containing <div id="previewHolder"> and its subsequent ul and li tags, and delete these (making sure to get all of it, no more, no less, so there are no open tags with no closers and vice versa), you will have eliminated to call to the css that you previously removed.

Assisted Solution

by:Alicia St Rose
Alicia St Rose earned 1000 total points
ID: 38847403
Hi mjburgard,
display: none;

Open in new window


Open in new window

No need to touch the js.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 13

Expert Comment

ID: 38847477
mjburgard, agreed, to a point, when you add code to make something not happen, it adds time to process the page.

Author Comment

ID: 38852807

When I delete the #previewHolder css code it either just moves the thumbnails to a different part of the page (if I only delete some of the 4 sections of #previewHolder) or removes the entire menu (if I delete all of the sections).

I do know that the slideshow and hover activities aren't part of PHP.  I can comment out the hover part of the JavaScript and end up with the page just showing non-interactive thumbnails easily enough.

As for finding the HTML, that's my issue.  If I look at the page source I can easily find that section of HTML and remove it (I've tested this with firebug).  But as far as I can tell, there is no actual HTML files in the websites FTP.  If the HTML code exists in one of the PHP or css files then I don't know which one it would be.


That also seems to do the trick, but in the end is it any different then commenting out the lines of JavaScript, performance wise?  Both options seem that they would still load everything and just not show it.  If there is a coding reason as to why using display: none in the css file is the better option please let me know (not trying to counter you, I'm really just ignorant and want to know for the future).

Expert Comment

by:Alicia St Rose
ID: 38872024
I'm with you mjburgard.
I'm not sure if it does stop the loading. I just find it a quick fix. Would love if anyone else would pipe in on this, cause I'd like to know as well.

Author Closing Comment

ID: 38944852
No real solution, gave some points for helpful comment.  Don't have time to try to find a better answer then what I am using and am not getting any more comments, so just closing the question.

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question