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

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 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
  • 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.
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery force form POST 7 45
issue with DB import 1 17
really easy css change help please 4 18
Reference key in foreach loop 4 18
These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

856 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