Using Fancybox to display images

[Guest]

Hi, I have installed a fresh copy of 2.3.1 and am busy creating my store. I have a page which displays photos that customers have sent in, but I am struggling to get them to display using the Fancybox effect. I have tried referring to the Fancybox website but to no avail. What am I doing wrong. I have added the following lines of code to my 'Testimonials' page:-

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

 

<script type="text/javascript" src="/ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="/ext/jquery/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

.....

 

<a id="single_image" href="images/Customer photographs/Photo1.jpg"><img src="images/Customer photographs/Photo1small.jpg" alt="Photos by Clarke Joss"/></a>

 

Can anyone spot any mistakes or things that I have done wrong? The actual URL for the page is http://www.climatehabitats.co.uk/testimonials.php

 

Thanks in advance for any help.

 

Regards, Paul.

[♥kymation]

Jquery and the Fancybox scripts are already in 2.3.1. Look at your catalog/includes/template_top.php. Adding those files a second time will not help.

 

Try this for the display code:

<a id="single_image" target="_blank" rel="fancybox" href="images/Customer photographs/Photo1.jpg"><img src="images/Customer photographs/Photo1small.jpg" alt="Photos by Clarke Joss"/></a>

Regards

Jim

[Guest]

Jquery and the Fancybox scripts are already in 2.3.1. Look at your catalog/includes/template_top.php. Adding those files a second time will not help.

 

Try this for the display code:

<a id="single_image" target="_blank" rel="fancybox" href="images/Customer photographs/Photo1.jpg"><img src="images/Customer photographs/Photo1small.jpg" alt="Photos by Clarke Joss"/></a>

Regards

Jim

 

Hi Jim, thanks for the reply. I did try this first actually and when it didn't work the first time, I added the Scripts again. I have now deleted the call to the scripts for the testimonial page as you have suggested and then copied and pasted your code, but as you will see, it still doesn't work and loads the image into a new page.

 

Anything else I should try?

[♥kymation]

It was supposed to load in a new page. Sorry, thought that was what you wanted.

 

Take a look at the Fancybox code in catalog/product_info.php. That's designed to do multiple images with the fancy Javascript effects. You just have to change the images that it uses.

 

Regards

Jim

[♥14steve14]

target="_blank" is telling it to open in a new window.

[Guest]

target="_blank" is telling it to open in a new window.

 

It is definately something that I am missing. When I remove the target="_blank" it still does exactly the same - appears in a new tab. When I looked at the code in the product_info.php file it looks exactly the same as mine, albeit in a different order. It appears that the fancybox function is not loading or something.

Any other ideas?

[♥kymation]

Fancybox in the Product Info page is active only when two or more large images are specified. Try adding a couple of large images to one of your products and see what happens. Or look at the Samsung Galaxy Tab on the demo site. If that's what you want, the product_info.php has the code to make that happen.

 

Regards

Jim

[Guest]

Fancybox in the Product Info page is active only when two or more large images are specified. Try adding a couple of large images to one of your products and see what happens. Or look at the Samsung Galaxy Tab on the demo site. If that's what you want, the product_info.php has the code to make that happen.

 

Regards

Jim

 

Hi Jim, yes, I have got that working fine in my product_info pages such as here:-

http://www.climatehabitats.co.uk/product_info.php?cPath=22&products_id=28

 

But I just cannot seem to get it working in this darned Testimonials page :-( and I really cannot see what I am doing wrong. My code looks like this:-

 

<a id="single_image" rel="fancybox" href="images/Customer photographs/Photo1.jpg"><img src="images/Customer photographs/Photo1small.jpg" alt="Photos by Clarke Joss"/></a>

 

Giving URLs to both small and large images as you have suggested. At the top of the page is require(DIR_WS_INCLUDES . 'template_top.php'); so I guess it must be loading in the Fancybox scripts.....this is really frustrating!

Thanks for your help..

[♥kymation]

You're using just the part of the code that pops up a single image. You need to use the whole thing:

<?php
   if (tep_not_null($product_info['products_image'])) {
     $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

     if (tep_db_num_rows($pi_query) > 0) {
?>

   <div id="piGal" style="float: right;">
     <ul>

<?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;
       }
?>

     </ul>
   </div>

<script type="text/javascript">
$('#piGal ul').bxGallery({
 maxwidth: 300,
 maxheight: 200,
 thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
 thumbcontainer: 300,
 load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

That pulls the image names from the database and then adds a line with each image and a link to the larger image. Images are items in an unordered list. The Javascript at the end converts the unordered list to the Fancybox display. You'll need to modify that database query to pull your gallery image names. The rest should pretty much just work.

 

Regards

Jim

[Guest]

Got it working, kinda! I looked at the source code of the compiled product_info.php page and noticed this script:-

 

<script type="text/javascript">

$('#piGal ul').bxGallery({

maxwidth: 300,

maxheight: 200,

thumbwidth: 75,

thumbcontainer: 300,

load_image: 'ext/jquery/bxGallery/spinner.gif'

});

</script>

 

 

<script type="text/javascript">

$("#piGal a[rel^=fancybox]").fancybox({

cyclic: true

});

</script>

 

 

Added it to my Testimonials page and it kind of works. I just need to get rid of the ability to scroll through the other images!

 

Thanks for all of your help...