fancybox problem on product_info.php

[thadeus]

there is no image on popup display when i add HTML Content for popup

like this

[ErikMM]

good luck

 

I gave up

 

http://www.oscommerce.com/forums/topic/368172-product-popup-image-text-231/page__p__1551977__fromsearch__1#entry1551977

 

http://www.oscommerce.com/forums/topic/366547-fancybox-in-osc-23/page__p__1553611__fromsearch__1#entry1553611

 

please let me know if you get anywhere with this frustrating situation...I am guessing the solution isn't difficult, but I don't know what it is...yet

[thadeus]

dont know php well enough but

i thing i got it... :)

 

and there is no duplicate image problem :D

 

but i dont know how can i put html contend in main frame

its seperated :/

 

just find these lines..

 

product_info.php

<?php
       $pi_counter = 0;
       while ($pi = tep_db_fetch_array($pi_query)) {
         $pi_counter++;

         $pi_entry = '        <li><a href="';

         if (tep_not_null($pi['htmlcontent'])) {
           $pi_entry .= '#piGalimg_' . $pi_counter;
         } else {
           $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
         }

         $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

         if (tep_not_null($pi['htmlcontent'])) {
           $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
         }

         $pi_entry .= '</li>';

         echo $pi_entry;
       }
?>

 

 

and replace with this

 

<?php
       $pi_counter = 0;
       while ($pi = tep_db_fetch_array($pi_query)) {
         $pi_counter++;

         $pi_entry = '        <li><a href="';

         $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);

         $pi_entry .= '" target="_blank" rel="fancybox" title="' . $pi['htmlcontent'] . '">' . tep_image(DIR_WS_IMAGES . $pi['image'], $pi['htmlcontent']) . '</a>';

         $pi_entry .= '</li>';

         echo $pi_entry;
       }
?>

 

[ErikMM]

finally tried it...works great!

 

may get rid of little tag below pics, but its growing on me.

[deltabiri]

after the modified, which code insert in html pop-up ?

[detoner]

finally tried it...works great!

 

may get rid of little tag below pics, but its growing on me.

 

Great thanks for the post worked for me also

- do you know how to add text below the images to say click here to enlarge image?

[drofe]

This doesn't work for me.

[drofe]

Sorry, I tried again and it did work. No idea why it didn't the first time. Thanks Deniz

[Guest]

thadeus: I wasn't even looking for exactly this, but once I tried it, I loved it! My only question about it, is how to add line breaks when entering the content in a new product? That is, line breaks where all the text is kept within the fancy border in the popups...

[Guest]

Honestly, now I can't recall what I was asking in that last post!!

 

But...

 

I added the text "Click to Enlarge" above the main picture in "product_info.php" (2nd line in code):

   $pi_counter = 0;
	?><center><?php echo 'Click to Enlarge' ?></center><?php ;   #####ADDED LINE#####
	while ($pi = tep_db_fetch_array($pi_query)) {
	  $pi_counter++;
	  $pi_entry = '		<li><a href="';
	  $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
	  $pi_entry .= '" target="_blank" rel="fancybox" title="'. $pi['htmlcontent'] . '">' . tep_image(DIR_WS_IMAGES . $pi['image'], $pi['htmlcontent']) . '</a>';
	  $pi_entry .= '</li>';
	  echo $pi_entry;
	}

[ErikMM]

Does anyone know why this won't work now? Really odd, as it works fine in two stores, but not a third. All are 2.3.3, coded exactly the same. In one store it does not work, the image(s) opens in a new tab and the text is not there either. Images should hover over store with the store still visible in background behind the images.

 

While I'm at it, are there any other fixes for this oSc bug, as fancybox never works with out of the box installs when adding product images.

[heranke]

Dear Community,

 

as I had the same trouble yesterday I'm very grateful this powerful community has solved it already. Now it is time to give something back:

 

Solution from Post 4 is working perfectly for me. But it is designed to close the case of multiple pictures only. There is still the need to close the case of 1 picture, hence the html content you give in the picture description should be desplayed as well.

 

in catalog/product_info.php

 

FIND (around row 121)

 

<div id="piGal" style="float: right;">
 <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
</div>

 

REPLACE WITH (If you look closely, its adding the title)

 

<div id="piGal" style="float: right;">
 <?php echo '<a title="' . $pi['htmlcontent'] . '" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
</div>

 

Simple and clean. You are finished.

 

OPTIONAL: Changing the style of the title, moving it to the bottom of the picture.

 

FIND (around row 129)

 

<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
cyclic: true
});
</script>

 

REPLACE WITH (It is adding the argument 'titlePosition')

 

<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
cyclic: true,
'titlePosition' : 'inside'
});
</script>

 

@@ErikMM Maybe your trouble is caused by different number of pictures. Please close the 1 picture case described above and report back. I got another solution in stock ;)

 

Kind Regards

heranke