Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

Posted

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...

Posted (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 by sawo
Posted

Just wanted to correct a mistake - template_top.php should be edited, instead of application_top.php!

Posted (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 by blr044
Posted

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.

  • 1 month later...
Posted

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>

Web Developer, Firebug, and Notepad++ are powerful free tools for web design.

Posted

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/

Web Developer, Firebug, and Notepad++ are powerful free tools for web design.

  • 1 month later...

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.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...