Mort-lemur Posted January 9, 2014 Posted January 9, 2014 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.
oscMarket Posted January 9, 2014 Posted January 9, 2014 I assume you speaking about the admin add/edit product where can add content to the img's? btw congratulations with your MOM award.
Mort-lemur Posted January 9, 2014 Author Posted January 9, 2014 @@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.
oscMarket Posted January 9, 2014 Posted January 9, 2014 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.
oscMarket Posted January 9, 2014 Posted January 9, 2014 just tested and : <iframe width="700" height="600" src="http://www.taylorbigred.com/brochures/Interactive/Safety_Brochure/"></iframe> Works verry well
Mort-lemur Posted January 9, 2014 Author Posted January 9, 2014 @@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.
Mort-lemur Posted January 9, 2014 Author Posted January 9, 2014 @@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.
Mort-lemur Posted January 9, 2014 Author Posted January 9, 2014 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.
♥joli1811 Posted January 9, 2014 Posted January 9, 2014 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.
Mort-lemur Posted January 10, 2014 Author Posted January 10, 2014 @@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.
♥joli1811 Posted January 10, 2014 Posted January 10, 2014 Hi Heather, https://github.com/osCommerce/oscommerce2/commit/6bdce8c10d7a3a652635405d1358595cdc24491b I had the header tags reloaded installed so the product_info.php was a bit fiddly but other than that fairly straight forward To improve is to change; to be perfect is to change often.
Mort-lemur Posted January 10, 2014 Author Posted January 10, 2014 @@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.
Mort-lemur Posted January 11, 2014 Author Posted January 11, 2014 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.
♥joli1811 Posted January 11, 2014 Posted January 11, 2014 maybe George already tested ?? To improve is to change; to be perfect is to change often.
multimixer Posted January 13, 2014 Posted January 13, 2014 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 My community profile | Template system for osCommerce - New: Responsive | Feedback channel
Mort-lemur Posted January 13, 2014 Author Posted January 13, 2014 @@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.
Mort-lemur Posted January 14, 2014 Author Posted January 14, 2014 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.
rahulkhanna Posted January 14, 2014 Posted January 14, 2014 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.