Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Large Image as an External Link - How?


Mort-lemur

Recommended Posts

Posted

Hi,

 

On 2.3.3.4 I want to add an image that when clicked on opens up a window (or popup) with the manufacturers site and their neat flash product brochure.

 

I thought it would simply be a case of adding the image as a Large Image then adding the link as the HTML code such as

<a href="http://www.site.com"></a>

 

But that does not seem to work - am I missing something?

 

Many Thanks

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

I assume you speaking about the admin add/edit product where can add content to the img's?

 

btw congratulations with your MOM award.

Posted

@@wHiTeHaT Hi, Yes thats what I mean - I need the content to be an external link.

 

And thank you :)

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

try:

 

<iframe height="XXX" width="XXX" src="http://yourmanufacturer.com"></iframe>

 

PS:i read they have a "flash product brochure." , you can try to look for the manufacturers sourcecode, they also embedded it, so you can grab the code and do the same.

 

Atleast you can test it.

Posted

just tested and :

 

<iframe width="700" height="600" src="http://www.taylorbigred.com/brochures/Interactive/Safety_Brochure/"></iframe>

 

Works verry well

Posted

@@wHiTeHaT Thanks - The code above works great

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

@@wHiTeHaT does your work on a 2nd click? ie if you open the large image link once, then close it and try again does it work? - on my setup it opens a white popup on the second try

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

yep... theres a bug.

Well my error logs are clear, wonder what causes that....

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

Use color box myself very interesting displays possible images /links / pdfs / google maps / iframes etc .

 

I believe it will replace fancy box in the next oscommerce versions.

 

I have already done myself and use it in a nav bar to display various things

 

infos is on git hub for oscommerce using colorbox

 

and

 

The colorbox site is here

 

http://www.jacklmoore.com/colorbox/

 

The script to call is below

 

<script>

$(document).ready(function(){

//Examples of how to assign the Colorbox event to elements

$(".group1").colorbox({rel:'group1'});

$(".group2").colorbox({rel:'group2', transition:"fade"});

$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});

$(".group4").colorbox({rel:'group4', slideshow:true});

$(".ajax").colorbox();

$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});

$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});

$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

$(".iframe2").colorbox({iframe:true, width:"70%", height:"110%"});

$(".inline").colorbox({inline:true, width:"50%"});

$(".callbacks").colorbox({

onOpen:function(){ alert('onOpen: colorbox is about to open'); },

onload:function(){ alert('onload: colorbox has started to load the targeted content'); },

onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },

onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },

onClosed:function(){ alert('onClosed: colorbox has completely closed'); }

});

 

$('.non-retina').colorbox({rel:'group5', transition:'none'})

$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

 

//Example of preserving a Javascript event for inline calls.

$("#click").click(function(){

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

 

anyone interested I have a demo site using this .great fun to play with would love to get the contact us integrated as pop up just no time the next few weeks

 

Regards

Joli

To improve is to change; to be perfect is to change often.

 

Posted

@@joli1811 do you have a link to the Github code?

 

Thanks

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

@@joli1811 Thanks John,

 

I may have a go at that this evening on my development store (after a good backup !)

 

Ill let you know how I get on......

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

OK had a few attempts at that now - but it messes with my product info page layout (the way I do it it does anyway) :(

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

MTS does not really modify product_info.php, it is just adding a <div> around the description. There would be no issues to start using colorbox or whatever. Heathers product_info.php is modified because of other reasons, add ons etc

 

To the topic: Fancybox is capable to display any type of content.

 

1) To display extern content, may it be an image or a complete page, you need to lil directly to that location, e.g.

 

<a href="http://multimixer.gr/wp-content/uploads/2010/11/blackphone1-525x350.jpg">

 

 

2) it's necessary to specify what the content type is, like inline, iframe etc. This you usually do in following way

 

$("selector").fancybox({
type: 'frame'
});

In this case here, we can't do that, since the gallery on the product info page may contain mixed content, so I added a class for the link, that can be inline or iframe depending on the content entered to the "html content" box in admin

 

All in all, the image are of product_info.php look like this now

 

<?php
 $pi_counter = 0;
 while ($pi = tep_db_fetch_array($pi_query)) {
	 $pi_counter++;
	 $ctype = 'inline';
	 $pi_entry = '	 <li><a href="';
	 if (tep_not_null($pi['htmlcontent'])) {
	 if ( substr($pi['htmlcontent'], 0, 7) == 'http://' ) {
		 $pi_entry .= $pi['htmlcontent'];
		 $ctype = 'iframe';
	 } else {
		 $pi_entry .= '#piGalimg_' . $pi_counter;
	 }
	 } else {
	 $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
	 }
	 $pi_entry .= '" target="_blank" class="' . $ctype .'" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
	 if (tep_not_null($pi['htmlcontent']) && substr($pi['htmlcontent'], 0, 7) != 'http://') {
	 $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
	 }
	 $pi_entry .= '</li>';
	 echo $pi_entry;
 }
?>

 

and the fancybox init

 

$("#piGal a[rel^='fancybox']").fancybox({
width: '100%',
height: '100%',
cyclic: true
});

 

This you can modify as you like of course (fancybox options)

 

To display any external content, you just need to add the url to that content into he HTML input box in admin

 

Heather is checking this on her site now @@Mort-lemur

Posted

@@multimixer Works like a charm - Thank you again George

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

Been testing and its so easy now to just add the external link rather than to add code for an i frame etc. makes it so much more useable and the problem of not showing up on second clich has been solved.

 

Thanks George

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Posted

thanks for the useful information and codes shared here..........

Rahul Khanna

Vistas Web Technologies,

S2, Dega Enclave, #12, 3rd Main,

8th Cross S T Bed, Koramangala

Bangalore 560034

Karnataka, INDIA

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...