sawo Posted November 2, 2010 Posted November 2, 2010 How to activate it? I see its there - the js and css is loaded, but the images still open in javascript popup and the code looks too complicated for me to change it... Quote
sawo Posted November 2, 2010 Author Posted November 2, 2010 (edited) NVM, i got it working... Add this to the head section of application_top.php (below line 28 for me): <script type="text/javascript"> $(document).ready(function() { /* * Examples - images */ $("a#example1").fancybox(); $("a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a#example3").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("a#example4").fancybox({ 'opacity' : true, 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'none' }); $("a#example5").fancybox(); $("a#example6").fancybox({ 'titlePosition' : 'outside', 'overlayColor' : '#000', 'overlayOpacity' : 0.9 }); $("a#example7").fancybox({ 'titlePosition' : 'inside' }); $("a#example8").fancybox({ 'titlePosition' : 'over' }); $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); /* * Examples - various */ $("#various1").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("#various2").fancybox(); $("#various3").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); $("#various4").fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none' }); }); </script> Now, open product_info.php and go to line 77 below this line: <div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;"> You should have this: <script type="text/javascript"><!-- document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>'); //--></script> Replace it with: <?php echo '<a id="example4" href="' . tep_href_link('' . DIR_WS_IMAGES . $product_info['products_image']) . '">' .tep_image('http://parfumche.com/' . DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?> Probably it could be done better, but it works so im happy with it. note: change example4 to 1-6 for different effects of the animation. Edited November 2, 2010 by sawo Quote
sawo Posted November 2, 2010 Author Posted November 2, 2010 Just wanted to correct a mistake - template_top.php should be edited, instead of application_top.php! Quote
blr044 Posted November 2, 2010 Posted November 2, 2010 (edited) Just wanted to correct a mistake - template_top.php should be edited, instead of application_top.php! I followed your steps, but I have different results. At product_info I have product name instead of the image now. When I click 'enlarge image', image opens in new browser window with image in upper left hand corner. This is not live store, but resides in a protected directory. Edited November 2, 2010 by blr044 Quote
Ken44 Posted November 2, 2010 Posted November 2, 2010 Hi Fancybox may be coming to V2.3 as standard code. The changes required are here. http://github.com/haraldpdl/oscommerce2/commit/582dcb56bf6ffdceb8741cc362cd876e9ba24c1f The way the images are held in the database is different from the way that Sam did it. All we need is a script to convert the database. Regards Ken Quote
sawo Posted November 3, 2010 Author Posted November 3, 2010 I followed your steps, but I have different results. At product_info I have product name instead of the image now. When I click 'enlarge image', image opens in new browser window with image in upper left hand corner. This is not live store, but resides in a protected directory. Are you using 2.3 from github? I have to test it on new install when i get back home to see if i didnt do something different. @Ken44 this is good info, but my code is like 50x times less than the changes described in the document. Quote
ErikMM Posted December 17, 2010 Posted December 17, 2010 my issue is here: Product popup image text 2.3.1 I figured out how to put the text(below), but no image is attached. I am guessing it is a simple fix. I added this to the "HTML Content(for popup)" box to get text, but no image is above the text. <div id="fancybox-title" style="display: block;"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td id="fancybox-title-float-left" class="fancybox-title" style="height: 22px; background: url("catalog/ext/jquery/fancy_title_left.png") repeat-x scroll 0% 0% transparent; padding-top: 6px;"> </td> <td id="fancybox-title-float-main" class="fancybox-title" style="background: url("catalog/ext/jquery/fancy_title_main.png") repeat-x scroll 0% 0% transparent; padding-top: 2px;"><div id="fancy_text_main">front</div></td> <td id="fancybox-title-float-right" class="fancybox-title" style="height: 22px; background: url("catalog/ext/jquery/fancy_title_right.png") repeat-x scroll 0% 0% transparent; padding-top: 6px;"></td></tr></tbody></table> Quote a-how-to-road-map 2.3.x road-map-for-the-newbies design basics how to make a horrible osC site ssl-how to updated-security-thread Web Developer, Firebug, and Notepad++ are powerful free tools for web design.
ErikMM Posted December 21, 2010 Posted December 21, 2010 got text AND image, but the thumb is still doubled as described here: Product popup image text 2.3.1 @ the Product Image "HTML Content (for popup)" box add this to get text AND IMAGE: <div id="fancybox-content" style="top: 0 px; right: 0px; bottom: 0px; left: 0px; width: auto; height: auto;"><img src="http://mtbthreads.com/catalog/images/mtbthreads_gen_bomb_400_color.png" id="fancybox-img" alt=""></div> <center><div id="fancybox-title" style="display: block;"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td id="fancybox-title-float-left" class="fancybox-title" style="height: 20px; background: url("catalog/ext/jquery/fancy_title_left.png") repeat-x scroll 0% 0% transparent; padding-top: 0px;"> </td> <td id="fancybox-title-float-main" class="fancybox-title" style="background: url("catalog/ext/jquery/fancy_title_main.png") repeat-x scroll 0% 0% transparent; padding-top: 0px;"><div id="fancy_text_main">Bomb! front</div></td> <td id="fancybox-title-float-right" class="fancybox-title" style="height: 20px; background: url("catalog/ext/jquery/fancy_title_right.png") repeat-x scroll 0% 0% transparent; padding-top: 0px;"></td></tr></tbody></table></center> I know there has to be an easier way. I've spent well over ten hours playing with ways to get no extra thumb. Perhaps a style sheet or product_info mod. nice examples of how to style the text are @ fancybox.net I found this as well, but it didn't help much: http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fca8335aa4/ Quote a-how-to-road-map 2.3.x road-map-for-the-newbies design basics how to make a horrible osC site ssl-how to updated-security-thread Web Developer, Firebug, and Notepad++ are powerful free tools for web design.
ErikMM Posted January 28, 2011 Posted January 28, 2011 solved here: http://www.oscommerce.com/forums/topic/370034-fancybox-problem-on-product-infophp/page__gopid__1562036#entry1562036 Quote a-how-to-road-map 2.3.x road-map-for-the-newbies design basics how to make a horrible osC site ssl-how to updated-security-thread Web Developer, Firebug, and Notepad++ are powerful free tools for web design.
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.