PrettyPhoto clash in inFocus HTML template

(6 posts) (2 voices)

1. 

   mapinact
   Member

   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

   EXAMPLE: http://williammalcolmrealestate.com.au/19Oaklands.html

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

   EXAMPLE: http://williammalcolmrealestate.com.au/19Oaklands-pic.html

   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" />
   </div>

   This has me stumped. Any ideas?

   Posted 9 months ago #
2. 

   Elliott
   Support

   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>
   </div>

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

   Posted 9 months ago #
3. 

   mapinact
   Member

   No, that doesn't work - and in your sample gallery at http://themes.mysitemyway.com/infocus_html/portfolio_gallery.html 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

   http://williammalcolmrealestate.com.au/19Oaklands.html

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

   http://williammalcolmrealestate.com.au/19Oaklands-pic.html

   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" />
   </div>

   Posted 9 months ago #
4. 

   mapinact
   Member

   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 9 months ago #
5. 

   mapinact
   Member

   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" />
   </div>

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

   Posted 9 months ago #
6. 

   mapinact
   Member

   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!
   See

   http://williammalcolmrealestate.com.au/19-Oaklands.html

   for the final result.

   Hope this helps someone in the future :-)

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.