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

Posted on 2013-02-01
Last Modified: 2013-03-02
I have a WordPress page I am working on .  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
  • 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 500 total points
ID: 38847403
Hi mjburgard,
display: none;

Open in new window


Open in new window

No need to touch the js.
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now