How to use FancyBox...?

[Snarg]

I am using 2.3.3 and so far things are running great. I am adding some images to my site and would like to know if it is possible to make them pop out, using FancyBox, like they do on the product listing.

 

These images will be on a few pages that I have added to the site. Any help with this would be greatly appreciated. Thank you.

[PupStar]

Scott,

 

 

You can call fancybox from any page on your store by adding the <div id="piGal"></div> around the code that displays your image.

 

then below add

 

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

 

I have just done this on a custom page.

 

One thing I would to do is display the product name above the image but can not seem to figure this out even using the options listed on the fancybox site.

 

Mark

[Snarg]

@@PupStar

 

Thanks for the fast reply. Just curious, how would this be used in, say, a table? Something like this?

 

<div id="piGal"><table border="0" cellspacing="5" cellpadding="0" align="center">
<tr>
<td><img src="images/image01.jpg" height=240 width=320/></td>
<td><img src="images/image02.jpg" height=240 width=320/></td>
<td><img src="images/image03.jpg" height=240 width=320/></td>
</tr>
<tr>
<td><img src="images/image04.jpg" height=240 width=320/></td>
<td><img src="images/image05.jpg" height=240 width=320/></td>
<td><img src="images/image06.jpg" height=240 width=320/></td>
</tr>
</table></div>
<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
cyclic: true
});
</script>

[Snarg]

Ok, this does not work:

<div id="piGal">
   <table border="0" cellspacing="5" cellpadding="0" align="center">
         <tr>
            <td><img src="images/image01.jpg" height=240 width=320/></td>
            <td><img src="images/image02.jpg" height=240 width=320/></td>
            <td><img src="images/image03.jpg" height=240 width=320/></td>
         </tr>
         <tr>
            <td><img src="images/image04.jpg" height=240 width=320/></td>
            <td><img src="images/image05.jpg" height=240 width=320/></td>
            <td><img src="images/image06.jpg" height=240 width=320/></td>
         </tr>
   </table>
</div>

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

 

I get this error:

Parse error: syntax error, unexpected 'fancybox' (T_STRING) in C:\xampp\htdocs\store03\includes\languages\english\april.php on line 34

 

I am trying to add this code in the page located in catalog/includes/languages/english. Should the JS code be placed in the page in the store root instead?

[PupStar]

I am trying to add this code in the page located in catalog/includes/languages/english. Should the JS code be placed in the page in the store root instead?

 

well for starters you should not be adding anything like that to a language file, period!

 

secondly you need to learn php and call the images correctly using the tep_image function (take a look at the product_info.php) to see how to do it.

 

thirdly the <div id="piGal"></div> needs to wrap each individual image link.

 

And yes the code does work if used in the correct way.

 

Mark

[Snarg]

well for starters you should not be adding anything like that to a language file, period!

 

secondly you need to learn php and call the images correctly using the tep_image function (take a look at the product_info.php) to see how to do it.

 

thirdly the <div id="piGal"></div> needs to wrap each individual image link.

 

And yes the code does work if used in the correct way.

 

Mark

I'm not saying it does not work :) I just don't know the correct way to use it.

 

I'm trying to convert my store from 2.2 RC2 to 2.3.3. As should be readily apparent, I don't really know how to code. However, with much searching and much, MUCH reading, I think I am on the way.

 

What I am attempting to do is replicate the page found here on my new store. I am doing this on a local, test server using XAMPP. (Good thing to, I just accidentally deleted it off of my computer. Luckily, I back up about every ten minutes :)

 

I would like to do as you have instructed but I don't really know where the code supplied would be placed. Thank you for your time.

[PupStar]

If you dont really know how to code I would suggest starting with 2.3.3 from scratch and modify it to look how your old store looks as you could really end up in a sticky mess.

[Snarg]

If you dont really know how to code I would suggest starting with 2.3.3 from scratch and modify it to look how your old store looks as you could really end up in a sticky mess.

Yeah, I am doing my best to avoid that kind of mess.

 

I started with a virgin install of 2.3.3 on my local XAMPP server. I am pretty much starting from scratch now. I have managed to import all of my old data to the new version I.E. customers, products, address book, all that good stuff.

 

I'm now in the process of changing the 'look and feel' of the new site to the old. So the point I am at now is rebuilding the boxes and links from old to new. Which leads me back to my original problem. On the old site I used a mod called 'Lightbox'. 2.3.3 comes with something similar called 'FancyBox'. I would like to have the images 'pop out' on my new store like the did on my old store. With some direction from the community is the possible for me to do?

 

Again, thank you for your time and assistance. It is certainly appreciated.

[♥joli1811]

Hi,

 

Would recommend 2.3 /information pages unlimited and as it seems your site is only to display your product not sell I would maybe install

 

osC as a info site, remove the cart functions via admin for 2.3.1

 

http://addons.oscommerce.com/info/7987

 

Regards

Joli

[Snarg]

Hi,

 

Would recommend 2.3 /information pages unlimited and as it seems your site is only to display your product not sell I would maybe install

 

osC as a info site, remove the cart functions via admin for 2.3.1

 

http://addons.oscommerce.com/info/7987

 

Regards

Joli

Thanks....?

 

We sell plenty: Click here

 

We sell the flowers directly from the site. The cow pages are informational.

[♥joli1811]

Thanks....?

 

We sell plenty: Click here

 

We sell the flowers directly from the site. The cow pages are informational.

 

Sorrry was getting you mixed up with someone else :D nice flowers

[Snarg]

BAM! Got it!

 

1) Make a box

2) Make a page

3) For the copy of the page that is going to be in the root of your store, add this code:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

4) For the copy residing in catalog/includes/languages/english, make your image tag look like this:

<a class="fancybox" rel="group" href="images/image01.jpg"><img src="images/image01.jpg" alt="" /></a>

 

Is it programmatically correct? I doubt it. Does it work for me? You betcha. I'm going to try and polish this up a bit to try and make it more correct but I'm fairly happy I made the thing work at all.

 

I hope this helps someone else as well.