Dan Cole Posted September 21, 2014 Share Posted September 21, 2014 Just started messing around with color box and additional images with my test bootstrap site. I don't know what I've done or what I didn't do but it doesn't display the images as I was expecting (like the Samsung Galaxy page shown on Burts demo site here...http://template.me.uk/testing/product_info.php?products_id=28) and the images aren't popping up either. I get a small image box without any image inside it. I've compared the code for both the ht module and the product_info pages and checked to see if the scripts and css files were in place and that all looks okay to me but obviously I'm missing something. You can see the problem on the following product page... http://www.shubee.ca/shubee/wax-dye-cones-per-pkg-p-6932.html Any idea what I might have done wrong? Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 21, 2014 Share Posted September 21, 2014 something wrong in your template top I think did you leave old code in there? well maybe not old just the js seems to be in the in the wrong place maybe footer or template_bottom not sure guess depends on install? <script src="ext/bootstrap/js/bootstrap.min.js"></script> <!DOCTYPE html> <html dir="ltr" lang="en"> <head> View source and you will see what I mean! Regards Joli To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
♥mattjt83 Posted September 21, 2014 Share Posted September 21, 2014 John is correct. Make sure your boostrap js is included after your jquery script. Matt Link to comment Share on other sites More sharing options...
Dan Cole Posted September 22, 2014 Author Share Posted September 22, 2014 Thanks @@joli1811 and @@mattjt83. Now I guess I just need to figure out with the bootstrap js call is coming from...I though it would be in template_top but it is not. Off to search around... Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 22, 2014 Author Share Posted September 22, 2014 That was easy...@@joli1811 I found it at the top of product_info...I've removed it and moved the bootstrap js call below the jquery as @@mattjt83 suggested...unfortunately still no joy. Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 22, 2014 Share Posted September 22, 2014 Hi Dan Still seeing a firebug error Again when looking at the source this is called at the top and "NetworkError: 404 Not Found - http://www.shubee.ca/shubee/ext/jquery/jquery-1.11. 1.min.js" this is called in probably in the the footer <script src="ext/jquery/jquery-1.11.0.min.js"></script> so back to the search I am no expert on bootstrap just starting myself but this is a conflict easiest is just put a jquery-1.11.1.min.js in the folder you should not need both !!! Regards John To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 22, 2014 Author Share Posted September 22, 2014 Thanks again @@joli1811. I pulled that reference out of there too but still no joy! All the js stuff is now at the bottom of the page in template_bottom...I'm wondering if it has to do with the image/thumbnail size? Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 22, 2014 Share Posted September 22, 2014 Just thought I would mention http://www.shubee.ca/shubee/gasalertclip-extreme-year-h2s-dector-p-6948.html is working fine and the other links only difference I can see is the page as options but who knows fixing the jquery and re uploading the images may solve Regards John Strange bug have you cache turned on or a thumbnailer ?? PPS: did notice problems with massive images and color box but your's are 500px × 500px (scaled to 250px × 250px) so pretty normal :wacko: To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 23, 2014 Author Share Posted September 23, 2014 Thanks again @@joli1811. The only page I'm having problems with is the one that is using the gallery feature...products with just a single image work as you would expect. That was the reason I thought it must have to do with the colorbox script...I'm going to try uploading a fresh version of the colorbox directory in case one of the files is missing or something....I'll also try uploading the images again as you suggested. BTW here is a link to Burts bootstrap version...the link I gave previously was to some test page Burt had up which was using the bxGallery and Fancybox... http://www.template.me.uk/2334bs3/product_info.php?cPath=21&products_id=28 Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 23, 2014 Author Share Posted September 23, 2014 Thanks @@wHiTeHaT I gave that a try and still no joy...in my pursuit though I gave @@joli1811 suggestion a try... re uploading the images may solve and deleted the images and uploaded them again and voila it now works...I'm still puzzled though so if anyone knows why this would solve the problem I'd be interested in knowing. In case anyone wants to chime in I'll leave this thread for a day or two and then come back and mark it solved. Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 24, 2014 Author Share Posted September 24, 2014 I was curious about this and decided to have a look at the products_images table to see if I could see any differences or reason why uploading the images again solved the problem and I realized that the first time around I added text to the HTML Content field thinking I could add an image description. I didn't do that the second time so I decided to see if that was the problem and as it turns out, it was. I'm now wondering if this has some thing to do with my install or if that is just the way it works? I tried entering data in different ways ie plain text...text surrounded by html code...a normal <a href="link here">Click</a> etc but they all caused the popup to fail. Anyone else see the same problem? Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 24, 2014 Share Posted September 24, 2014 Interesting have not had time to duplicate busy today/tomorrow but a full color box script is <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> goes in the template_top.php Will try and test tomorrow see if I can duplicate regards Joli To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
burt Posted September 24, 2014 Share Posted September 24, 2014 The HTML input box is for (eg) embedding a youtube video. Look at the samsung galaxy product in a default install. If you put anything in that box, it will show no picture in the popup. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 24, 2014 Author Share Posted September 24, 2014 That explains it @@burt and that is exactly what was happening. Thanks for the clarification. Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 24, 2014 Share Posted September 24, 2014 Interesting thought I would just test something and it worked (w00t) Using the script above I mentioned and instead of inserting a pop iframe in the image field which does not work I tested in the actual product description with a pdf ( other possibility's here have not really tested ) Using ckeditor here myself. Result here old development site of mine sorry for the link but need to show the result Click on the latest news at the bottom of the product description and you will see what I mean Now that is a pdf in an iframe using a colorbox link in this case <ul> <li><a class="iframe2" href="http://www.xxxxxxx.com/demo6/images/news_nontando_web.pdf" style="color:#666666;text-align:left">Latest News </a></li> </ul> but there are many more possibility just thought I would post as sort of cool Regards joli To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 24, 2014 Share Posted September 24, 2014 John, When I clicked on 'latest news', my browser (Firefox 32) opened a 'blank white box' on the screen over your site as if to display what was to come. It then downloaded your PDF file, and then opened it in the default PDF viewer (Adobe Reader XI). When I closed Adobe Reader, my browser was still open to your page. However, the large 'blank white box' still covered a large portion of the page, and I needed to refresh the browser to reload the full page. This may just be the result of the interaction of the specific 'default programs' on this workstation, but I thought I should mention it. Malcolm Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 24, 2014 Share Posted September 24, 2014 Hi Malcolm Well it is an old site just dev never noticed before I did see this when google maps were updated white blank page ************************************************************************ Did you add the extended script to template_top??? "Revised sorry silly from me you are viewing the link " ************************************************************************* <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> viewing in Firefox 32.0.2 works fine for me just played about with the code never really tested Just tested seems ok in IE as well The same code is used in the navigation bar the links latest news and directions to our store only complaint I had was when google map changed a bit of code !! Try those links and see if they pop up!!! But you may be right as said never really properly tested just took from color box website maybe last year or longer the site is also probably running an older version of jquery and color box Regards Joli To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
ArtcoInc Posted September 24, 2014 Share Posted September 24, 2014 I was just viewing your site. I have not changed anything on my site, nor am I using this feature in my site (I don't think ;) ). Malcolm Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 24, 2014 Share Posted September 24, 2014 I was just viewing your site. I have not changed anything on my site, nor am I using this feature in my site (I don't think ;) ). Malcolm :D yeah got mixed up there post revised To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
Dan Cole Posted September 25, 2014 Author Share Posted September 25, 2014 I don't think you even need the colorbox script @@joli1811. I've been embedding youtube videos within an iframe on my product pages for as long I can remember...I don't think I've tried adding a pdf to an iframe though so that is something new for me. Your example looked really nice so maybe using the script cleans up the appearance a bit when using it for pdf files. Thanks for the tip... Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
♥joli1811 Posted September 25, 2014 Share Posted September 25, 2014 Hi Dan Never used much myself few extra options found below used it mainly in a nav bar quick and easy www.jacklmoore.com/colorbox/ http://www.jacklmoore.com/colorbox/example2/ Regards John To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.