[Solved] Pop images in the product description page

[J.Sahu]

Hello,

 

I have some products which has images in their descriptions. You can view them here. i want those images to be poped up instead of opening directly. Can it be possible ?

Edited November 15, 2013 by J.Sahu (see edit history)

[NemoPS]

Try adding a class of 'fancybox' to the wrapping links, and see what happens!

[J.Sahu]

Let me try this. I'll post feed back here 

[J.Sahu]

well my description page is something like this can you suggest me how can I add that class. Sorry for the silly question 

 

 

<p><span style="font-size: small;">Arne Jacobsen Egg Chair</span></p>

<p><span style="font-size: small;"><span style="font-family: tahoma, arial, helvetica, sans-serif;">This </span><span style="font-family: tahoma, arial, helvetica, sans-serif;">marvelous and extraordinary chair is one of the most famous chair designs in architectural engineering. This chair was designed in 1958 by Arne Jacobsen for the Radisson SAS hotel in Copenhagen. Representing the most organic form, the material used</span><span style="font-family: tahoma, arial, helvetica, sans-serif;"> is pure polyurethane foam and the chair comes with a loose seat cushion. The swivel base comes in stainless steel tubing while it allows you a full 360-degree comfortable turn. Jacobsen had made a remarkable effort to put his theories of integrated design and architecture into practice. The Egg chair is one of the triumphs of Jacobsen’s total design which still is a work of pure art. This lustrous looking chair comes in various colors of fabric swatches as well as leather</span><span style="font-family: tahoma, arial, helvetica, sans-serif;"> swatches. The leather used in the design is soft to touch and is very durable. The lush natural texture that it gives to the chair makes the look of the chair visually very appealing.<br /><br /><strong><br />Dimensions:</strong></span></span></p>

<p><span style="font-family: Tahoma; font-size: small;">33.75"W x 31"D x 42"H<br />Weight:  41.5 lbs<br /><br /><strong><br />About our fabric quality:</strong></span></p>

<p><span style="font-family: Tahoma;"><span style="font-size: small;">B Fabric:  75% wool; 25% nylon<br />T Fabric:  85% wool; 15% nylon<br /><br /><strong><br />About our leather quality:</strong><br /><br />Standard Leather<br />This Australian & American Full Grain, Semi-aniline leather is soft to the touch, and very durable, and is 9mm-1.1mm thick.<br /><br />Deluxe Leather<br />This Australian & American </span><span style="font-family: Verdana; font-size: small;">Bovine <span style="font-family: tahoma, arial, helvetica, sans-serif;">rawhide semi-</span><span style="font-family: tahoma, arial, helvetica, sans-serif;">aniline, lightly</span><span style="font-family: tahoma, arial, helvetica, sans-serif;"> pigmented full</span><span style="font-family: tahoma, arial, helvetica, sans-serif;"> grain leather is dyed without pigmentation,</span> <span style="font-family: tahoma, arial, helvetica, sans-serif;">and will develop a beautiful patina look over time (a process that allows oxidation & exposure to</span> <span style="font-family: tahoma, arial, helvetica, sans-serif;">light to bring out the richness of the dye and color potency). Our deluxe leather is 1.3mm-1.5mm thick.</span><br /><br /><span style="font-family: tahoma, arial, helvetica, sans-serif;">Premium Leather</span><br /><span style="font-family: tahoma, arial, helvetica, sans-serif;">This European Bovine</span> <span style="font-family: tahoma, arial, helvetica, sans-serif;">rawhide full grain, full aniline leather is our highest leather grade and is extra soft, extra durable, featuring a lush natural texture without the use of chemical spray after the aniline dying process. Our Premium Leather is 1.3mm-1.5mm thick.<br /><br /><strong><br />Availability:</strong>  Special Order<br /><strong>Est. Delivery:</strong>  10 to 16 weeks</span></span></span></p>

<p> </p>

<p><strong>Fabric Swatches </strong></p>

<p><a href="https://www.allworldfurniture.com/prodimages/BB201%20-%20large.jpg"><img title="b201 charcoal" src="https://www.allworldfurniture.com/prodimages/bB201.JPG" alt="b201 charcoal" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/B202.jpg"><img title="B202 Brown" src="https://www.allworldfurniture.com/prodimages/B202small.jpg" alt="B202 Brown" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/B203.jpg"><img title="B203 Green" src="https://www.allworldfurniture.com/prodimages/B203small.jpg" alt="B203 Green" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/B204.jpg"><img title="B204 Red" src="https://www.allworldfurniture.com/prodimages/B204small.jpg" alt="B204 Red" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/B206.jpg"><img title="B206 Light Gray" src="https://www.allworldfurniture.com/prodimages/B206small.jpg" alt="B206 Light Gray" width="54" height="82" /></a>  </p>

<p><a href="https://www.allworldfurniture.com/prodimages/T501.jpg"><img title="T501 Red" src="https://www.allworldfurniture.com/prodimages/T501small.jpg" alt="T501 Red" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T502.jpg"><img title="T502 Black" src="https://www.allworldfurniture.com/prodimages/T502small.jpg" alt="T502 Black" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T503.jpg"><img title="T503 Dark Blue" src="https://www.allworldfurniture.com/prodimages/T503small.jpg" alt="T503 Dark Blue" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T504.jpg"><img title="T504 Brown" src="https://www.allworldfurniture.com/prodimages/T504small.jpg" alt="T504 Brown" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T505.jpg"><img title="T505 Warm Gray" src="https://www.allworldfurniture.com/prodimages/T505small.jpg" alt="T505 Warm Gray" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T506.jpg"><img title="T506 Light Gray" src="https://www.allworldfurniture.com/prodimages/T506small.jpg" alt="T506 Light Gray" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T507.jpg"><img title="T507 Burgundy" src="https://www.allworldfurniture.com/prodimages/T507small.jpg" alt="T507 Burgundy" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T508.jpg"><img title="T508 Light Blue" src="https://www.allworldfurniture.com/prodimages/T508small.jpg" alt="T508 Light Blue" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T509.jpg"><img title="T509 Dark Green" src="https://www.allworldfurniture.com/prodimages/T509small.jpg" alt="T509 Dark Green" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T511.jpg"><img title="T511 Light Orange" src="https://www.allworldfurniture.com/prodimages/T511small.jpg" alt="T511 Light Orange" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/T512.jpg"><img title="T512 Dark Orange" src="https://www.allworldfurniture.com/prodimages/T512small.jpg" alt="T512 Dark Orange" width="54" height="82" /></a></p>

<p> </p>

<p><strong>Leather Swatches</strong> </p>

<p><a href="https://www.allworldfurniture.com/prodimages/ML001.jpg"><img title="ML001 Black Standard Leather " src="https://www.allworldfurniture.com/prodimages/ML001small.jpg" alt="ML001 Black Standard Leather " width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML002.jpg"><img title="ML002 White Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML002small.jpg" alt="ML002 White Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML003.jpg"><img title="ML003 Red Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML003small.jpg" alt="ML003 Red Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML004.jpg"><img title="ML004 Beige Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML004small.jpg" alt="ML004 Beige Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML005.jpg"><img title="ML005 Brown Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML005small.jpg" alt="ML005 Brown Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML007.jpg"><img title="ML007 Pure White Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML007small.jpg" alt="ML007 Pure White Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML023.jpg"><img title="ML023 Dark Red Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML023small.jpg" alt="ML023 Dark Red Standard Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML025.jpg"><img title="ML025 Chocolate Brown Standard Leather" src="https://www.allworldfurniture.com/prodimages/ML025small.jpg" alt="ML025 Chocolate Brown Standard Leather" width="54" height="82" /></a></p>

<p><a href="https://www.allworldfurniture.com/prodimages/ML033.jpg"><img title="ML033 Black Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML033small.jpg" alt="ML033 Black Deluxe Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML034.jpg"><img title="ML034 Cream White Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML034small.jpg" alt="ML034 Cream White Deluxe Leather " width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML035.jpg"><img title="ML035 Red Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML035small.jpg" alt="ML035 Red Deluxe Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML036.jpg"><img title="ML036 Biege Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML036small.jpg" alt="ML036 Biege Deluxe Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML037.jpg"><img title="ML037 Brown Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML037small.jpg" alt="ML037 Brown Deluxe Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML039.jpg"><img title="ML039 Dark Red Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML039small.jpg" alt="ML039 Dark Red Deluxe Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML040.jpg"><img title="ML040 Chocolate Brown Deluxe Leather" src="https://www.allworldfurniture.com/prodimages/ML040small.jpg" alt="ML040 Chocolate Brown Deluxe Leather" width="54" height="82" /></a></p>

<p><a href="https://www.allworldfurniture.com/prodimages/ML006.jpg"><img title="ML006 Black Premium Leather" src="https://www.allworldfurniture.com/prodimages/ML006small.jpg" alt="ML006 Black Premium Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML016.jpg"><img title="ML016 Brown Premium Leather" src="https://www.allworldfurniture.com/prodimages/ML016small.jpg" alt="ML016 Brown Premium Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML017.jpg"><img title="ML017 White Premium Leather" src="https://www.allworldfurniture.com/prodimages/ML017small.JPG" alt="ML017 White Premium Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML026.jpg"><img title="ML026 Red Premium Leather" src="https://www.allworldfurniture.com/prodimages/ML026small.jpg" alt="ML026 Red Premium Leather" width="54" height="82" /></a>  <a href="https://www.allworldfurniture.com/prodimages/ML042.jpg"><img title="ML042 Chocolate Brown Premium Leather" src="https://www.allworldfurniture.com/prodimages/ML042small.jpg" alt="ML042 Chocolate Brown Premium Leather" width="54" height="82" /></a></p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

Edited November 15, 2013 by J.Sahu (see edit history)

[NemoPS]

You can try something like

<a class="fancybox" href="https://www.allworld...201 - large.jpg"><img title="b201 charcoal" src="https://www.allworld...mages/bB201.JPG" alt="b201 charcoal" width="54" height="82" /></a> 

It should work on the productpage, as fancybox is already embedded

[J.Sahu]

Well that didn't work for me.

[NemoPS]

Hm, weird! Try editing the product.tpl template file and add

 

$('.fancybox').fancybox();

 

In a jquery ready wrapper

[J.Sahu]

In my local host I tried to change the code of product.tpl. I didn't find any jquery so added this 

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

It worked and thank you for the help but their a problem lies in my server. In server the product.tpl is same as my local but the difference is while viewing my page source I didn't find any jquery but in server I found some/ Will that cause any problem ? Well it s complicated thing I'm trying to make you understand you can reply me. I'm just 1 step away from making this thread solved.

[J.Sahu]

@Nemo Thank you for the initial idea. I solved my problem by adding a small jquery. I'm using custom theme, so added the query in the custom js file. I suggest others to add this code on the product.tpl file of their theme or js file.

 

mycode for my website 

$(document).ready(function() {
	$(".more_info_inner a:has('img')").fancybox();
});

you can simply add the fancybox class to the anchor

$(document).ready(function() {
	$("a").fancybox();
});

 

[NemoPS]

Great!

But be aware that adding fancybox to all anchors will cause big trouble, and great slowdowns overall

[J.Sahu]

Yes I've added the class to the product description field. 

http://www.allworldfurniture.com/

Edited January 18, 2014 by J.Sahu (see edit history)

[BoKr]

Hello

 

I like your site and the slow cart animation. Can you tell me how you did that?

And I like the fact that the cart stays open when sth is added and does not collapse.

 

Both I am interested in. Can you tell me if you made the changes and what they are or is it the theme?

 

thanks alot!

[J.Sahu]

It's the impact of the theme and I've bought the theme.