PrettyPhoto clash in inFocus HTML template

resolved (6 posts) (2 voices)

  1. Hi, I've bought the InFocus HTML template and have modified it to suit my client. I have a problem with prettyPhoto and the CSS.

    Using the portfolio_gallery page as a base I'm trying to put in a large unclickable display photo at the top of the page, then a row of clickable "prettyPhotos" underneath, then some text etc.

    The problem is that with the large single photo active the prettyphoto gallery below shows first blanks then the greyed "magnify" panels - no thumbnails at all. It's styles as class .portfolio_single_pic


    If I comment out the single photo above them in the HTML they work fine.


    The only difference between these files is a couple of commented-out lines:

    <div class="portfolio_single_pic">
    <img src="images/gallery/19Oaklands/P1000257.JPG" alt="Front entry" />

    This has me stumped. Any ideas?

    Posted 3 years ago #
  2. Elliott

    Hello mapinact,

    The problem is that your three images below the big image are not displaying correct? Currently they do not have any images inside the frame,

    <div class="portfolio_img_holder">
    <a href="images/gallery/19Oaklands/P1000263.JPG" rel="lightbox[portfolio1]" class="load_portfolio_img">
    	<span class="roll_over rollover" style="display: block;"></span></a>

    You will want to add an image inside the span there.

    Posted 3 years ago #
  3. No, that doesn't work - and in your sample gallery at there's no image in that span either.

    The problem is that with the large image above then the prettyPhoto gallery below is not loading its pics as thumbnails and is also loading as if the rollover condition is active. If you click on the prettyPhoto images they come up as they should, but there is no thumbnail view loaded, and the magnifying glass .png overlay that should only occur on mouseover is showing instead. Again, see

    to see the problem. If I comment out the large pic above then everything works fine. This file with the large image commented out

    works fine. The ONLY difference between these files is that these three lines were commented out of the second one:

    <div class="portfolio_single_pic">
    <img src="images/gallery/19Oaklands/P1000257.JPG" alt="Front entry" />
    Posted 2 years ago #
  4. So, just to clarify exactly what I want to do:

    What I want is to have is the large standard unclickable non-prettyPhoto image at the top and a prettyPhoto gallery that shows thumbnails, rollover display and lightbox images as per a regular gallery, all on the one page. Can this be done?

    Posted 2 years ago #
  5. Just as a matter of interest I downloaded the InFocus gallery HTML page to my machine. It loaded perfectly, all images displaying as they should. I then added those three lines defining the large image to the page

    <div class="portfolio_single_pic">
    <img src="images/gallery/19Oaklands/P1000257.JPG" alt="Front entry" />

    above the first gallery entry, saved it and reloaded it in my browser and it broke immediately - no thumbnail, rollover condition activated. :-(

    Posted 2 years ago #
  6. OK, sorry to drop so many posts in a row, but I've found a solution. Why this works I do not know, but it does. It seemed that the problem is related to the large picture class ".portfolio_single_image" and it's associated ".portfolio_single_image img" class. Why I don't know - if you apply all the class style parameters inline in the HTML then the page actually works perfectly. So, I just created two brand new classes at the bottom of the stylesheet with identical parameters but different names (in this case .lead_single_pic and .lead_single_pic img), applied the new styles in my HTML and voila!it works as desired!

    for the final result.

    Hope this helps someone in the future :-)

    Posted 2 years ago #


You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme