dvale Posted May 10, 2013 Share Posted May 10, 2013 osCommerce 2.3.1 It is hard to believe how difficult has been to make the small thumbnail images from the gallery to enlarge its original image. At the product info, you can see the main thumbnail image and underneath are a group of smaller images that you can hover with the mouse to get the thumbnail version on top. So in order to display the big original version of that image with the popup window, you must click on the thumbnail on top. Then you can browse the rest of the images as normal with the features fancybox provide. https://www.shopperstation.com/feinwerkbau-basic-precharged-rifle-p-40/ As I said, I can hover the smaller images but I cannot click on them to display the popup window with its original version of the image. WHY ????????????????????????????????????????????????????????????????????????? Please, just show me what to place in this code to make that happen. <?php $pi_counter = 0; while ($pi = tep_db_fetch_array($pi_query)) { $pi_counter++; $pi_entry = ' <li class="wrapper_pic_div"><a href="'; if (tep_not_null($pi['htmlcontent'])) { $pi_entry .= '#piGalimg_' . $pi_counter; } else { $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false); } $pi_entry .= '" target="_blank" rel="fancybox" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;">' . tep_image(DIR_WS_IMAGES . $pi['image'], '', (PROD_INFO_IMAGE_WIDTH + 2), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"') . '</a>'; if (tep_not_null($pi['htmlcontent'])) { $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>'; } $pi_entry .= '</li>'; echo $pi_entry; } ?> </ul> </div> <script type="text/javascript"> $(function(){ $('#piGal ul').bxGallery({ maxwidth: '', maxheight: '', thumbwidth: <?php echo (($pi_counter > 1) ? '72' : '0'); ?>, thumbcontainer: 245, load_image: 'ext/jquery/bxGallery/spinner.gif' }) }); </script> The support will be highly appreciated. Link to comment Share on other sites More sharing options...
oscMarket Posted May 10, 2013 Share Posted May 10, 2013 /* bxGallery v1.1 Plugin developed by: Steven Wanderski http://bxgalleryplugin.com http://stevenwanderski.com Released under the GPL license: http://www.gnu.org/licenses/gpl.html */ (function($){$.fn.extend({bxGallery:function(options){var defaults={maxwidth:'',maxheight:'',thumbwidth:200,thumbcrop:false,croppercent:.35,thumbplacement:'bottom',thumbcontainer:'',opacity:.7,load_text:'',load_image:'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif',wrapperclass:'outer'} var options=$.extend(defaults,options);var o=options;var cont='';var caption='';var $outer='';var $orig=this;var tall=0;var wide=0;var showing=0;var i=0;var k=$orig.find('img').size();var current;preload_img();function preload_img(){$orig.hide();if(o.load_text!=''){$orig.before('<div id="loading">'+o.load_text+'</div>');}else{$orig.before('<div id="loading"><img src="'+o.load_image+'" /></div>');} $orig.parent().find('#loading').css({'textAlign':'center','width':o.maxwidth});$orig.find('img').each(function(){var the_source=$(this).attr('src');var the_img=new Image();the_img.onload=function(){preload_check();};the_img.src=the_source;});} function preload_check(){i++;if(i==k){init();}} function init(){set_layout();set_main_img();place_thumbcontainer();set_thumbs();} function set_layout(){$orig.parent().find('#loading').hide();$orig.show();$orig.wrap('<div class="'+o.wrapperclass+'"></div>');$outer=$orig.parent();$orig.find('li').css({'position':'absolute'});} function set_main_img(){$orig.find('img').each(function(){var $this=$(this);var $imgheight=$this.height();var $imgwidth=$this.width();if($this.prop('title')!=''){caption=$this.prop('title');$this.parent().append('<div class="caption">'+caption+'</div>');} if(o.maxwidth!=''){if($this.width()>o.maxwidth){$this.width(o.maxwidth);$this.height(($imgheight/$imgwidth)*o.maxwidth);}} if(o.maxheight!=''){if($this.height()>o.maxheight){$this.height(o.maxheight);$this.width(($imgwidth/$imgheight)*o.maxheight);}} var captionheight=0;if($this.parent().find('.caption').height()>0){captionheight=$this.parent().find('.caption').height();} if($this.height()+captionheight>tall){tall=$this.height()+captionheight;} if($this.width()>wide){wide=$this.width();} cont+='<li><img src="'+$this.prop('src')+'" /></li>';});$orig.find('li:not(:first)').hide();$orig.height(tall);$orig.width(wide);$outer.find('.caption').width(wide);} function place_thumbcontainer(){if(o.thumbplacement=='top'){$outer.prepend('<ul class="thumbs">'+cont+'</ul>');$outer.find('.thumbs').css({'overflow':'auto'});}else if(o.thumbplacement=='left'){$outer.prepend('<ul class="thumbs">'+cont+'</ul>');$orig.css({'float':'left'});$outer.find('.thumbs').css({'float':'left'});}else if(o.thumbplacement=='bottom'){$outer.append('<ul class="thumbs">'+cont+'</ul>');}else if(o.thumbplacement=='right'){$outer.append('<ul class="thumbs">'+cont+'</ul>');$orig.css({'float':'left'});$outer.find('.thumbs').css({'float':'left'});} $outer.append('<div style="clear:both"></div>');if(o.thumbcontainer!=''){$outer.find('.thumbs').width(o.thumbcontainer);}} function set_thumbs(){$outer.find('.thumbs li').each(function(){var $this=$(this);var $img=$this.find('img');var $imgwidth=$img.width();var $imgheight=$img.height();if(o.thumbcrop){$img.width($imgwidth*o.croppercent);$img.height(($imgheight/$imgwidth)*$img.width());$this.css({'float':'left','width':o.thumbwidth,'height':o.thumbwidth,'overflow':'hidden','cursor':'pointer'});}else{$img.width(o.thumbwidth);$img.height(($imgheight/$imgwidth)*o.thumbwidth);$this.css({'float':'left','cursor':'pointer','width':$img.width(),'height':$img.height()});$this.height($img.height());}$img.css({'width':$img.width(),'height': $img.height()}); $this.click(function(){var x=$outer.find('.thumbs li').index($this);if(showing!=x){$orig.find('li').fadeOut();$orig.find('li').eq(x).fadeIn();showing=x;}});});var $thumb=$outer.find('.thumbs li');$thumb.eq(0).addClass('on');$thumb.not('.on').fadeTo(0,o.opacity);$thumb.click(function(){ alert('hello');}).hover(function(){$(this).stop().fadeTo(200,1);},function(){$(this).not('.on').stop().fadeTo(200,o.opacity);});}}});})(jQuery); Link to comment Share on other sites More sharing options...
dvale Posted May 11, 2013 Author Share Posted May 11, 2013 ext / jquery / bxGallery / jquery.bxGallery.1.1.min I believe the code you post comes from the updated osCommerce 2.3.3 ($this.attr changes for $this.prop) and some personal touches from your end. My code is: /* bxGallery v1.1 Plugin developed by: Steven Wanderski http://bxgalleryplugin.com http://stevenwanderski.com Released under the GPL license: http://www.gnu.org/licenses/gpl.html */ (function($){$.fn.extend({bxGallery:function(options){var defaults={maxwidth:'',maxheight:'',thumbwidth:200,thumbcrop:false,croppercent:.35,thumbplacement:'bottom',thumbcontainer:'',opacity:.7,load_text:'',load_image:'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif',wrapperclass:'outer'} var options=$.extend(defaults,options);var o=options;var cont='';var caption='';var $outer='';var $orig=this;var tall=0;var wide=0;var showing=0;var i=0;var k=$orig.find('img').size();var current;preload_img();function preload_img(){$orig.hide();if(o.load_text!=''){$orig.before('<div id="loading">'+o.load_text+'</div>');}else{$orig.before('<div id="loading"><img src="'+o.load_image+'" /></div>');} $orig.parent().find('#loading').css({'textAlign':'center','width':o.maxwidth});$orig.find('img').each(function(){var the_source=$(this).attr('src');var the_img=new Image();the_img.onload=function(){preload_check();};the_img.src=the_source;});} function preload_check(){i++;if(i==k){init();}} function init(){set_layout();set_main_img();place_thumbcontainer();set_thumbs();} function set_layout(){$orig.parent().find('#loading').hide();$orig.show();$orig.wrap('<div class="'+o.wrapperclass+'"></div>');$outer=$orig.parent();$orig.find('li').css({'position':'absolute'});} function set_main_img(){$orig.find('img').each(function(){var $this=$(this);var $imgheight=$this.height();var $imgwidth=$this.width();if($this.attr('title')!=''){caption=$this.attr('title');$this.parent().append('<div class="caption">'+caption+'</div>');} if(o.maxwidth!=''){if($this.width()>o.maxwidth){$this.width(o.maxwidth);$this.height(($imgheight/$imgwidth)*o.maxwidth);}} if(o.maxheight!=''){if($this.height()>o.maxheight){$this.height(o.maxheight);$this.width(($imgwidth/$imgheight)*o.maxheight);}} if($this.height()+$this.parent().find('.caption').height()>tall){tall=$this.height()+$this.parent().find('.caption').height();} if($this.width()>wide){wide=$this.width();} cont+='<li><img src="'+$this.attr('src')+'" /></li>';});$orig.find('li:not(:first)').hide();$orig.height(tall);$orig.width(wide);$outer.find('.caption').width(wide);} function place_thumbcontainer(){if(o.thumbplacement=='top'){$outer.prepend('<ul class="thumbs">'+cont+'</ul>');$outer.find('.thumbs').css({'overflow':'auto'});}else if(o.thumbplacement=='left'){$outer.prepend('<ul class="thumbs">'+cont+'</ul>');$orig.css({'float':'left'});$outer.find('.thumbs').css({'float':'left'});}else if(o.thumbplacement=='bottom'){$outer.append('<ul class="thumbs">'+cont+'</ul>');}else if(o.thumbplacement=='right'){$outer.append('<ul class="thumbs">'+cont+'</ul>');$orig.css({'float':'left'});$outer.find('.thumbs').css({'float':'left'});} $outer.append('<div style="clear:both"></div>');if(o.thumbcontainer!=''){$outer.find('.thumbs').width(o.thumbcontainer);}} function set_thumbs(){$outer.find('.thumbs li').each(function(){var $this=$(this);var $img=$this.find('img');var $imgwidth=$img.width();var $imgheight=$img.height();if(o.thumbcrop){$img.width($imgwidth*o.croppercent);$img.height(($imgheight/$imgwidth)*$img.width());$this.css({'float':'left','width':o.thumbwidth,'height':o.thumbwidth,'overflow':'hidden','cursor':'pointer'});}else{$img.width(o.thumbwidth);$img.height(($imgheight/$imgwidth)*o.thumbwidth);$this.css({'float':'left','cursor':'pointer'});$this.height($img.height());} $this.click(function(){var x=$outer.find('.thumbs li').index($this);if(showing!=x){$orig.find('li').fadeOut();$orig.find('li').eq(x).fadeIn();showing=x;}});});var $thumb=$outer.find('.thumbs li');$thumb.eq(0).addClass('on');$thumb.not('.on').fadeTo(0,o.opacity);$thumb.click(function(){var t=$(this);var i=$thumb.index(this);if(current!=i){$thumb.removeClass('on');t.addClass('on');$thumb.not('.on').fadeTo(200,o.opacity);current=i;}}).hover(function(){$(this).stop().fadeTo(200,1);$(this).click();},function(){$(this).not('.on').stop().fadeTo(200,o.opacity);});}}});})(jQuery); Thank you for your post, but I still cannot make those thumbnails clickable. This is the behavior I've got so far: https://www.shopperstation.com/gran-sabana-tour-days-nights-p-486/ I hope someone up there could have mercy on this for me. Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 You cant make the thumbs clickable and show the image in fancygallery. unless you write a complete new js function. I figured that out after one hour inspecting a MIN JS (w00t) i could not find a proper full.js Link to comment Share on other sites More sharing options...
foxp2 Posted May 11, 2013 Share Posted May 11, 2013 @@dvale: you use an 1.3.4 version : https://www.shopperstation.com/ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js unpacked file : /* * FancyBox - jQuery Plugin * Simple and fancy lightbox alternative * * Examples and documentation at: http://fancybox.net * * Copyright (c) 2008 - 2010 Janis Skarnelis * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated. * * Version: 1.3.4 (11/11/2010) * Requires: jQuery v1.3+ * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ ;(function($) { var tmp, loading, overlay, wrap, outer, content, close, title, nav_left, nav_right, selectedIndex = 0, selectedOpts = {}, selectedArray = [], currentIndex = 0, currentOpts = {}, currentArray = [], ajaxLoader = null, imgPreloader = new Image(), imgRegExp = /\.(jpg|gif|png|bmp|jpeg)(.*)?$/i, swfRegExp = /[^\.]\.(swf)\s*$/i, loadingTimer, loadingFrame = 1, titleHeight = 0, titleStr = '', start_pos, final_pos, busy = false, fx = $.extend($('<div/>')[0], { prop: 0 }), isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest, /* * Private methods */ _abort = function() { loading.hide(); imgPreloader.onerror = imgPreloader.onload = null; if (ajaxLoader) { ajaxLoader.abort(); } tmp.empty(); }, _error = function() { if (false === selectedOpts.onerror(selectedArray, selectedIndex, selectedOpts)) { loading.hide(); busy = false; return; } selectedOpts.titleShow = false; selectedOpts.width = 'auto'; selectedOpts.height = 'auto'; tmp.html( '<p id="fancybox-error">The requested content cannot be loaded.<br />Please try again later.</p>' ); _process_inline(); }, _start = function() { var obj = selectedArray[ selectedIndex ], href, type, title, str, emb, ret; _abort(); selectedOpts = $.extend({}, $.fn.fancybox.defaults, (typeof $(obj).data('fancybox') == 'undefined' ? selectedOpts : $(obj).data('fancybox'))); ret = selectedOpts.onstart(selectedArray, selectedIndex, selectedOpts); if (ret === false) { busy = false; return; } else if (typeof ret == 'object') { selectedOpts = $.extend(selectedOpts, ret); } title = selectedOpts.title || (obj.nodeName ? $(obj).attr('title') : obj.title) || ''; if (obj.nodeName && !selectedOpts.orig) { selectedOpts.orig = $(obj).children("img:first").length ? $(obj).children("img:first") : $(obj); } if (title === '' && selectedOpts.orig && selectedOpts.titleFromAlt) { title = selectedOpts.orig.attr('alt'); } href = selectedOpts.href || (obj.nodeName ? $(obj).attr('href') : obj.href) || null; if ((/^(?:javascript)/i).test(href) || href == '#') { href = null; } if (selectedOpts.type) { type = selectedOpts.type; if (!href) { href = selectedOpts.content; } } else if (selectedOpts.content) { type = 'html'; } else if (href) { if (href.match(imgRegExp)) { type = 'image'; } else if (href.match(swfRegExp)) { type = 'swf'; } else if ($(obj).hasClass("iframe")) { type = 'iframe'; } else if (href.indexOf("#") === 0) { type = 'inline'; } else { type = 'ajax'; } } if (!type) { _error(); return; } if (type == 'inline') { obj = href.substr(href.indexOf("#")); type = $(obj).length > 0 ? 'inline' : 'ajax'; } selectedOpts.type = type; selectedOpts.href = href; selectedOpts.title = title; if (selectedOpts.autoDimensions) { if (selectedOpts.type == 'html' || selectedOpts.type == 'inline' || selectedOpts.type == 'ajax') { selectedOpts.width = 'auto'; selectedOpts.height = 'auto'; } else { selectedOpts.autoDimensions = false; } } if (selectedOpts.modal) { selectedOpts.overlayShow = true; selectedOpts.hideOnOverlayClick = false; selectedOpts.hideOnContentClick = false; selectedOpts.enableEscapeButton = false; selectedOpts.showCloseButton = false; } selectedOpts.padding = parseInt(selectedOpts.padding, 10); selectedOpts.margin = parseInt(selectedOpts.margin, 10); tmp.css('padding', (selectedOpts.padding + selectedOpts.margin)); $('.fancybox-inline-tmp').unbind('fancybox-cancel').bind('fancybox-change', function() { $(this).replaceWith(content.children()); }); switch (type) { case 'html' : tmp.html( selectedOpts.content ); _process_inline(); break; case 'inline' : if ( $(obj).parent().is('#fancybox-content') === true) { busy = false; return; } $('<div class="fancybox-inline-tmp" />') .hide() .insertBefore( $(obj) ) .bind('fancybox-cleanup', function() { $(this).replaceWith(content.children()); }).bind('fancybox-cancel', function() { $(this).replaceWith(tmp.children()); }); $(obj).appendTo(tmp); _process_inline(); break; case 'image': busy = false; $.fancybox.showActivity(); imgPreloader = new Image(); imgPreloader.onerror = function() { _error(); }; imgPreloader.onload = function() { busy = true; imgPreloader.onerror = imgPreloader.onload = null; _process_image(); }; imgPreloader.src = href; break; case 'swf': selectedOpts.scrolling = 'no'; str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"><param name="movie" value="' + href + '"></param>'; emb = ''; $.each(selectedOpts.swf, function(name, val) { str += '<param name="' + name + '" value="' + val + '"></param>'; emb += ' ' + name + '="' + val + '"'; }); str += '<embed src="' + href + '" type="application/x-shockwave-flash" width="' + selectedOpts.width + '" height="' + selectedOpts.height + '"' + emb + '></embed></object>'; tmp.html(str); _process_inline(); break; case 'ajax': busy = false; $.fancybox.showActivity(); selectedOpts.ajax.win = selectedOpts.ajax.success; ajaxLoader = $.ajax($.extend({}, selectedOpts.ajax, { url : href, data : selectedOpts.ajax.data || {}, error : function(XMLHttpRequest, textStatus, errorThrown) { if ( XMLHttpRequest.status > 0 ) { _error(); } }, success : function(data, textStatus, XMLHttpRequest) { var o = typeof XMLHttpRequest == 'object' ? XMLHttpRequest : ajaxLoader; if (o.status == 200) { if ( typeof selectedOpts.ajax.win == 'function' ) { ret = selectedOpts.ajax.win(href, data, textStatus, XMLHttpRequest); if (ret === false) { loading.hide(); return; } else if (typeof ret == 'string' || typeof ret == 'object') { data = ret; } } tmp.html( data ); _process_inline(); } } })); break; case 'iframe': _show(); break; } }, _process_inline = function() { var w = selectedOpts.width, h = selectedOpts.height; if (w.toString().indexOf('%') > -1) { w = parseInt( ($(window).width() - (selectedOpts.margin * 2)) * parseFloat(w) / 100, 10) + 'px'; } else { w = w == 'auto' ? 'auto' : w + 'px'; } if (h.toString().indexOf('%') > -1) { h = parseInt( ($(window).height() - (selectedOpts.margin * 2)) * parseFloat(h) / 100, 10) + 'px'; } else { h = h == 'auto' ? 'auto' : h + 'px'; } tmp.wrapInner('<div style="width:' + w + ';height:' + h + ';overflow: ' + (selectedOpts.scrolling == 'auto' ? 'auto' : (selectedOpts.scrolling == 'yes' ? 'scroll' : 'hidden')) + ';position:relative;"></div>'); selectedOpts.width = tmp.width(); selectedOpts.height = tmp.height(); _show(); }, _process_image = function() { selectedOpts.width = imgPreloader.width; selectedOpts.height = imgPreloader.height; $("<img />").attr({ 'id' : 'fancybox-img', 'src' : imgPreloader.src, 'alt' : selectedOpts.title }).appendTo( tmp ); _show(); }, _show = function() { var pos, equal; loading.hide(); if (wrap.is(":visible") && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) { $.event.trigger('fancybox-cancel'); busy = false; return; } busy = true; $(content.add( overlay )).unbind(); $(window).unbind("resize.fb scroll.fb"); $(document).unbind('keydown.fb'); if (wrap.is(":visible") && currentOpts.titlePosition !== 'outside') { wrap.css('height', wrap.height()); } currentArray = selectedArray; currentIndex = selectedIndex; currentOpts = selectedOpts; if (currentOpts.overlayShow) { overlay.css({ 'background-color' : currentOpts.overlayColor, 'opacity' : currentOpts.overlayOpacity, 'cursor' : currentOpts.hideOnOverlayClick ? 'pointer' : 'auto', 'height' : $(document).height() }); if (!overlay.is(':visible')) { if (isIE6) { $('select:not(#fancybox-tmp select)').filter(function() { return this.style.visibility !== 'hidden'; }).css({'visibility' : 'hidden'}).one('fancybox-cleanup', function() { this.style.visibility = 'inherit'; }); } overlay.show(); } } else { overlay.hide(); } final_pos = _get_zoom_to(); _process_title(); if (wrap.is(":visible")) { $( close.add( nav_left ).add( nav_right ) ).hide(); pos = wrap.position(), start_pos = { top : pos.top, left : pos.left, width : wrap.width(), height : wrap.height() }; equal = (start_pos.width == final_pos.width && start_pos.height == final_pos.height); content.fadeTo(currentOpts.changeFade, 0.3, function() { var finish_resizing = function() { content.html( tmp.contents() ).fadeTo(currentOpts.changeFade, 1, _finish); }; $.event.trigger('fancybox-change'); content .empty() .removeAttr('filter') .css({ 'border-width' : currentOpts.padding, 'width' : final_pos.width - currentOpts.padding * 2, 'height' : selectedOpts.autoDimensions ? 'auto' : final_pos.height - titleHeight - currentOpts.padding * 2 }); if (equal) { finish_resizing(); } else { fx.prop = 0; $(fx).animate({prop: 1}, { duration : currentOpts.changeSpeed, easing : currentOpts.easingChange, step : _draw, complete : finish_resizing }); } }); return; } wrap.removeAttr("style"); content.css('border-width', currentOpts.padding); if (currentOpts.transitionIn == 'elastic') { start_pos = _get_zoom_from(); content.html( tmp.contents() ); wrap.show(); if (currentOpts.opacity) { final_pos.opacity = 0; } fx.prop = 0; $(fx).animate({prop: 1}, { duration : currentOpts.speedIn, easing : currentOpts.easingIn, step : _draw, complete : _finish }); return; } if (currentOpts.titlePosition == 'inside' && titleHeight > 0) { title.show(); } content .css({ 'width' : final_pos.width - currentOpts.padding * 2, 'height' : selectedOpts.autoDimensions ? 'auto' : final_pos.height - titleHeight - currentOpts.padding * 2 }) .html( tmp.contents() ); wrap .css(final_pos) .fadeIn( currentOpts.transitionIn == 'none' ? 0 : currentOpts.speedIn, _finish ); }, _format_title = function(title) { if (title && title.length) { if (currentOpts.titlePosition == 'float') { return '<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">' + title + '</td><td id="fancybox-title-float-right"></td></tr></table>'; } return '<div id="fancybox-title-' + currentOpts.titlePosition + '">' + title + '</div>'; } return false; }, _process_title = function() { titleStr = currentOpts.title || ''; titleHeight = 0; title .empty() .removeAttr('style') .removeClass(); if (currentOpts.titleShow === false) { title.hide(); return; } titleStr = $.isFunction(currentOpts.titleFormat) ? currentOpts.titleFormat(titleStr, currentArray, currentIndex, currentOpts) : _format_title(titleStr); if (!titleStr || titleStr === '') { title.hide(); return; } title .addClass('fancybox-title-' + currentOpts.titlePosition) .html( titleStr ) .appendTo( 'body' ) .show(); switch (currentOpts.titlePosition) { case 'inside': title .css({ 'width' : final_pos.width - (currentOpts.padding * 2), 'marginLeft' : currentOpts.padding, 'marginRight' : currentOpts.padding }); titleHeight = title.outerHeight(true); title.appendTo( outer ); final_pos.height += titleHeight; break; case 'over': title .css({ 'marginLeft' : currentOpts.padding, 'width' : final_pos.width - (currentOpts.padding * 2), 'bottom' : currentOpts.padding }) .appendTo( outer ); break; case 'float': title .css('left', parseInt((title.width() - final_pos.width - 40)/ 2, 10) * -1) .appendTo( wrap ); break; default: title .css({ 'width' : final_pos.width - (currentOpts.padding * 2), 'paddingLeft' : currentOpts.padding, 'paddingRight' : currentOpts.padding }) .appendTo( wrap ); break; } title.hide(); }, _set_navigation = function() { if (currentOpts.enableEscapeButton || currentOpts.enableKeyboardNav) { $(document).bind('keydown.fb', function(e) { if (e.keyCode == 27 && currentOpts.enableEscapeButton) { e.preventDefault(); $.fancybox.close(); } else if ((e.keyCode == 37 || e.keyCode == 39) && currentOpts.enableKeyboardNav && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') { e.preventDefault(); $.fancybox[ e.keyCode == 37 ? 'prev' : 'next'](); } }); } if (!currentOpts.showNavArrows) { nav_left.hide(); nav_right.hide(); return; } if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex !== 0) { nav_left.show(); } if ((currentOpts.cyclic && currentArray.length > 1) || currentIndex != (currentArray.length -1)) { nav_right.show(); } }, _finish = function () { if (!$.support.opacity) { content.get(0).style.removeAttribute('filter'); wrap.get(0).style.removeAttribute('filter'); } if (selectedOpts.autoDimensions) { content.css('height', 'auto'); } wrap.css('height', 'auto'); if (titleStr && titleStr.length) { title.show(); } if (currentOpts.showCloseButton) { close.show(); } _set_navigation(); if (currentOpts.hideOnContentClick) { content.bind('click', $.fancybox.close); } if (currentOpts.hideOnOverlayClick) { overlay.bind('click', $.fancybox.close); } $(window).bind("resize.fb", $.fancybox.resize); if (currentOpts.centeronscroll) { $(window).bind("scroll.fb", $.fancybox.center); } if (currentOpts.type == 'iframe') { $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content); } wrap.show(); busy = false; $.fancybox.center(); currentOpts.onComplete(currentArray, currentIndex, currentOpts); _preload_images(); }, _preload_images = function() { var href, objNext; if ((currentArray.length -1) > currentIndex) { href = currentArray[ currentIndex + 1 ].href; if (typeof href !== 'undefined' && href.match(imgRegExp)) { objNext = new Image(); objNext.src = href; } } if (currentIndex > 0) { href = currentArray[ currentIndex - 1 ].href; if (typeof href !== 'undefined' && href.match(imgRegExp)) { objNext = new Image(); objNext.src = href; } } }, _draw = function(pos) { var dim = { width : parseInt(start_pos.width + (final_pos.width - start_pos.width) * pos, 10), height : parseInt(start_pos.height + (final_pos.height - start_pos.height) * pos, 10), top : parseInt(start_pos.top + (final_pos.top - start_pos.top) * pos, 10), left : parseInt(start_pos.left + (final_pos.left - start_pos.left) * pos, 10) }; if (typeof final_pos.opacity !== 'undefined') { dim.opacity = pos < 0.5 ? 0.5 : pos; } wrap.css(dim); content.css({ 'width' : dim.width - currentOpts.padding * 2, 'height' : dim.height - (titleHeight * pos) - currentOpts.padding * 2 }); }, _get_viewport = function() { return [ $(window).width() - (currentOpts.margin * 2), $(window).height() - (currentOpts.margin * 2), $(document).scrollLeft() + currentOpts.margin, $(document).scrollTop() + currentOpts.margin ]; }, _get_zoom_to = function () { var view = _get_viewport(), to = {}, resize = currentOpts.autoScale, double_padding = currentOpts.padding * 2, ratio; if (currentOpts.width.toString().indexOf('%') > -1) { to.width = parseInt((view[0] * parseFloat(currentOpts.width)) / 100, 10); } else { to.width = currentOpts.width + double_padding; } if (currentOpts.height.toString().indexOf('%') > -1) { to.height = parseInt((view[1] * parseFloat(currentOpts.height)) / 100, 10); } else { to.height = currentOpts.height + double_padding; } if (resize && (to.width > view[0] || to.height > view[1])) { if (selectedOpts.type == 'image' || selectedOpts.type == 'swf') { ratio = (currentOpts.width ) / (currentOpts.height ); if ((to.width ) > view[0]) { to.width = view[0]; to.height = parseInt(((to.width - double_padding) / ratio) + double_padding, 10); } if ((to.height) > view[1]) { to.height = view[1]; to.width = parseInt(((to.height - double_padding) * ratio) + double_padding, 10); } } else { to.width = Math.min(to.width, view[0]); to.height = Math.min(to.height, view[1]); } } to.top = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - to.height - 40) * 0.5)), 10); to.left = parseInt(Math.max(view[2] - 20, view[2] + ((view[0] - to.width - 40) * 0.5)), 10); return to; }, _get_obj_pos = function(obj) { var pos = obj.offset(); pos.top += parseInt( obj.css('paddingTop'), 10 ) || 0; pos.left += parseInt( obj.css('paddingLeft'), 10 ) || 0; pos.top += parseInt( obj.css('border-top-width'), 10 ) || 0; pos.left += parseInt( obj.css('border-left-width'), 10 ) || 0; pos.width = obj.width(); pos.height = obj.height(); return pos; }, _get_zoom_from = function() { var orig = selectedOpts.orig ? $(selectedOpts.orig) : false, from = {}, pos, view; if (orig && orig.length) { pos = _get_obj_pos(orig); from = { width : pos.width + (currentOpts.padding * 2), height : pos.height + (currentOpts.padding * 2), top : pos.top - currentOpts.padding - 20, left : pos.left - currentOpts.padding - 20 }; } else { view = _get_viewport(); from = { width : currentOpts.padding * 2, height : currentOpts.padding * 2, top : parseInt(view[3] + view[1] * 0.5, 10), left : parseInt(view[2] + view[0] * 0.5, 10) }; } return from; }, _animate_loading = function() { if (!loading.is(':visible')){ clearInterval(loadingTimer); return; } $('div', loading).css('top', (loadingFrame * -40) + 'px'); loadingFrame = (loadingFrame + 1) % 12; }; /* * Public methods */ $.fn.fancybox = function(options) { if (!$(this).length) { return this; } $(this) .data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) .unbind('click.fb') .bind('click.fb', function(e) { e.preventDefault(); if (busy) { return; } busy = true; $(this).blur(); selectedArray = []; selectedIndex = 0; var rel = $(this).attr('data-fancybox-gallery') || ''; if (!rel || rel == '' || rel === 'nofollow') { selectedArray.push(this); } else { selectedArray = $("a[data-fancybox-gallery=" + rel + "], area[data-fancybox-gallery=" + rel + "]"); selectedIndex = selectedArray.index( this ); } _start(); return; }); return this; }; $.fancybox = function(obj) { var opts; if (busy) { return; } busy = true; opts = typeof arguments[1] !== 'undefined' ? arguments[1] : {}; selectedArray = []; selectedIndex = parseInt(opts.index, 10) || 0; if ($.isArray(obj)) { for (var i = 0, j = obj.length; i < j; i++) { if (typeof obj[i] == 'object') { $(obj[i]).data('fancybox', $.extend({}, opts, obj[i])); } else { obj[i] = $({}).data('fancybox', $.extend({content : obj[i]}, opts)); } } selectedArray = jQuery.merge(selectedArray, obj); } else { if (typeof obj == 'object') { $(obj).data('fancybox', $.extend({}, opts, obj)); } else { obj = $({}).data('fancybox', $.extend({content : obj}, opts)); } selectedArray.push(obj); } if (selectedIndex > selectedArray.length || selectedIndex < 0) { selectedIndex = 0; } _start(); }; $.fancybox.showActivity = function() { clearInterval(loadingTimer); loading.show(); loadingTimer = setInterval(_animate_loading, 66); }; $.fancybox.hideActivity = function() { loading.hide(); }; $.fancybox.next = function() { return $.fancybox.pos( currentIndex + 1); }; $.fancybox.prev = function() { return $.fancybox.pos( currentIndex - 1); }; $.fancybox.pos = function(pos) { if (busy) { return; } pos = parseInt(pos); selectedArray = currentArray; if (pos > -1 && pos < currentArray.length) { selectedIndex = pos; _start(); } else if (currentOpts.cyclic && currentArray.length > 1) { selectedIndex = pos >= currentArray.length ? 0 : currentArray.length - 1; _start(); } return; }; $.fancybox.cancel = function() { if (busy) { return; } busy = true; $.event.trigger('fancybox-cancel'); _abort(); selectedOpts.onCancel(selectedArray, selectedIndex, selectedOpts); busy = false; }; // Note: within an iframe use - parent.$.fancybox.close(); $.fancybox.close = function() { if (busy || wrap.is(':hidden')) { return; } busy = true; if (currentOpts && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) { busy = false; return; } _abort(); $(close.add( nav_left ).add( nav_right )).hide(); $(content.add( overlay )).unbind(); $(window).unbind("resize.fb scroll.fb"); $(document).unbind('keydown.fb'); content.find('iframe').attr('src', 'about:blank'); if (currentOpts.titlePosition !== 'inside') { title.empty(); } wrap.stop(); function _cleanup() { overlay.fadeOut('fast'); title.empty().hide(); wrap.hide(); $.event.trigger('fancybox-cleanup'); content.empty(); currentOpts.onClosed(currentArray, currentIndex, currentOpts); currentArray = selectedOpts = []; currentIndex = selectedIndex = 0; currentOpts = selectedOpts = {}; busy = false; } if (currentOpts.transitionOut == 'elastic') { start_pos = _get_zoom_from(); var pos = wrap.position(); final_pos = { top : pos.top , left : pos.left, width : wrap.width(), height : wrap.height() }; if (currentOpts.opacity) { final_pos.opacity = 1; } title.empty().hide(); fx.prop = 1; $(fx).animate({ prop: 0 }, { duration : currentOpts.speedOut, easing : currentOpts.easingOut, step : _draw, complete : _cleanup }); } else { wrap.fadeOut( currentOpts.transitionOut == 'none' ? 0 : currentOpts.speedOut, _cleanup); } }; $.fancybox.resize = function() { if (overlay.is(':visible')) { overlay.css('height', $(document).height()); } $.fancybox.center(true); }; $.fancybox.center = function() { var view, align; if (busy) { return; } align = arguments[0] === true ? 1 : 0; view = _get_viewport(); if (!align && (wrap.width() > view[0] || wrap.height() > view[1])) { return; } wrap .stop() .animate({ 'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)), 'left' : parseInt(Math.max(view[2] - 20, view[2] + ((view[0] - content.width() - 40) * 0.5) - currentOpts.padding)) }, typeof arguments[0] == 'number' ? arguments[0] : 200); }; $.fancybox.init = function() { if ($("#fancybox-wrap").length) { return; } $('body').append( tmp = $('<div id="fancybox-tmp"></div>'), loading = $('<div id="fancybox-loading"><div></div></div>'), overlay = $('<div id="fancybox-overlay"></div>'), wrap = $('<div id="fancybox-wrap"></div>') ); outer = $('<div id="fancybox-outer"></div>') .append('<div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div>') .appendTo( wrap ); outer.append( content = $('<div id="fancybox-content"></div>'), close = $('<a id="fancybox-close"></a>'), title = $('<div id="fancybox-title"></div>'), nav_left = $('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'), nav_right = $('<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a>') ); close.click($.fancybox.close); loading.click($.fancybox.cancel); nav_left.click(function(e) { e.preventDefault(); $.fancybox.prev(); }); nav_right.click(function(e) { e.preventDefault(); $.fancybox.next(); }); if ($.fn.mousewheel) { wrap.bind('mousewheel.fb', function(e, delta) { if (busy) { e.preventDefault(); } else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) { e.preventDefault(); $.fancybox[ delta > 0 ? 'prev' : 'next'](); } }); } if (!$.support.opacity) { wrap.addClass('fancybox-ie'); } // if (isIE6) { // loading.addClass('fancybox-ie6'); // wrap.addClass('fancybox-ie6'); // // $('<iframe id="fancybox-hide-sel-frame" src="' + (/^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank' ) + '" scrolling="no" border="0" frameborder="0" tabindex="-1"></iframe>').prependTo(outer); // } }; $.fn.fancybox.defaults = { padding : 10, margin : 40, opacity : false, modal : false, cyclic : false, scrolling : 'auto', // 'auto', 'yes' or 'no' width : 560, height : 340, autoScale : true, autoDimensions : true, centeronscroll : false, ajax : {}, swf : { wmode: 'transparent' }, hideOnOverlayClick : true, hideOnContentClick : false, overlayShow : true, overlayOpacity : 0.7, overlayColor : '#777', titleShow : true, titlePosition : 'float', // 'float', 'outside', 'inside' or 'over' titleFormat : null, titleFromAlt : false, transitionIn : 'fade', // 'elastic', 'fade' or 'none' transitionOut : 'fade', // 'elastic', 'fade' or 'none' speedIn : 300, speedOut : 300, changeSpeed : 300, changeFade : 'fast', easingIn : 'swing', easingOut : 'swing', showCloseButton : true, showNavArrows : true, enableEscapeButton : true, enableKeyboardNav : true, onstart : function(){}, onCancel : function(){}, onComplete : function(){}, onCleanup : function(){}, onClosed : function(){}, onerror : function(){} }; $(document).ready(function() { $.fancybox.init(); }); })(jQuery); Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 I'm freaking , i bited me into this issue, just for you.And i almost have it o:) Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 @@dvale: you use an 1.3.4 version : https://www.shopperstation.com/ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js unpacked file : @@foxp2 , the issue is related to bxgallery , not the fancy gallery. It would be nice if i had the full js of it. The one i found over the net isnt the same. Link to comment Share on other sites More sharing options...
foxp2 Posted May 11, 2013 Share Posted May 11, 2013 @@wHiTeHaT oops ! :blush: this file : https://gist.github.com/foxp2/5560124 ? Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 Ok, i got it working. :rolleyes: EDITED: i go check that file and see if it is useable , then i will adept the code i have and provide it here. For now it load however the image in a new window , not in the nice iframe?...any suggestions to give it the fancyness of fancy ? Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 Ok , i have it working , but theres 1 issue. Whenever i click a thumb the first time (does not mather wich thumb) , nothing happens , or when i change the code, it directly goes to the image url. But when i click a second time , on whatever thumb,All works perfect. As i'm testing this on osc2.4 open base.php and add below the <body> the folowing: <script> $(window).load(function() { $('a.menu').on("click", function(e){ e.preventDefault(); //var mytest = $(this).data("path"); //var id = $(this).attr('id'); // alert(id); // gets the id of a clicked link that has a class of menu $('a.menu').fancybox(); }); }); </script> Replace the jquery.bxGallery.1.1.min.js content with: /* bxGallery v1.1 Plugin developed by: Steven Wanderski http://bxgalleryplugin.com http://stevenwanderski.com Released under the GPL license: http://www.gnu.org/licenses/gpl.html */ (function ($) { $.fn.extend({ bxGallery: function (options) { var defaults = { maxwidth: '', maxheight: '', thumbwidth: 200, thumbcrop: false, croppercent: .35, thumbplacement: 'bottom', thumbcontainer: '', opacity: .7, load_text: '', load_image: 'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif', wrapperclass: 'outer' } var options = $.extend(defaults, options); var o = options; var cont = ''; var cont2 = ''; var caption = ''; var $outer = ''; var $orig = this; var tall = 0; var wide = 0; var showing = 0; var i = 0; var k = $orig.find('img').size(); var current; preload_img(); function preload_img() { $orig.hide(); if (o.load_text != '') { $orig.before('<div id="loading">' + o.load_text + '</div>'); } else { $orig.before('<div id="loading"><img src="' + o.load_image + '" /></div>'); } $orig.parent().find('#loading').css({ 'textAlign': 'center', 'width': o.maxwidth }); $orig.find('img').each(function () { var the_source = $(this).attr('src'); var the_img = new Image(); the_img.onload = function () { preload_check(); }; the_img.src = the_source; }); } function preload_check() { i++; if (i == k) { init(); } } function init() { set_layout(); set_main_img(); place_thumbcontainer(); set_thumbs(); } function set_layout() { $orig.parent().find('#loading').hide(); $orig.show(); $orig.wrap('<div class="' + o.wrapperclass + '"></div>'); $outer = $orig.parent(); $orig.find('li').css({ 'position': 'absolute' }); } function set_main_img() { $orig.find('img').each(function () { var $this = $(this); var $imgheight = $this.height(); var $imgwidth = $this.width(); if ($this.prop('title') != '') { caption = $this.prop('title'); $this.parent().append('<div class="caption">' + caption + '</div>'); } if (o.maxwidth != '') { if ($this.width() > o.maxwidth) { $this.width(o.maxwidth); $this.height(($imgheight / $imgwidth) * o.maxwidth); } } if (o.maxheight != '') { if ($this.height() > o.maxheight) { $this.height(o.maxheight); $this.width(($imgwidth / $imgheight) * o.maxheight); } } var captionheight = 0; if ($this.parent().find('.caption').height() > 0) { captionheight = $this.parent().find('.caption').height(); } if ($this.height() + captionheight > tall) { tall = $this.height() + captionheight; } if ($this.width() > wide) { wide = $this.width(); } cont += '<li><img src="' + $this.prop('src') + '" /></li>'; cont2 += '<li><a href="' + $this.prop('src') + '" class="menu" id="inline" target="_blank" rel="fancybox"><img src="' + $this.prop('src') + '"/></a></li>'; }); $orig.find('li:not(:first)').hide(); $orig.height(tall); $orig.width(wide); $outer.find('.caption').width(wide); } function place_thumbcontainer() { if (o.thumbplacement == 'top') { $outer.prepend('<ul class="thumbs">' + cont2 + '</ul>'); $outer.find('.thumbs').css({ 'overflow': 'auto' }); } else if (o.thumbplacement == 'left') { $outer.prepend('<ul class="thumbs">' + cont2 + '</ul>'); $orig.css({ 'float': 'left' }); $outer.find('.thumbs').css({ 'float': 'left' }); } else if (o.thumbplacement == 'bottom') { $outer.append('<ul class="thumbs">' + cont2 + '</ul>'); } else if (o.thumbplacement == 'right') { $outer.append('<ul class="thumbs">' + cont2 + '</ul>'); $orig.css({ 'float': 'left' }); $outer.find('.thumbs').css({ 'float': 'left' }); } $outer.append('<div style="clear:both"></div>'); if (o.thumbcontainer != '') { $outer.find('.thumbs').width(o.thumbcontainer); } } function set_thumbs() { $outer.find('.thumbs li').each(function () { var $this = $(this); var $img = $this.find('img'); var $imgwidth = $img.width(); var $imgheight = $img.height(); if (o.thumbcrop) { $img.width($imgwidth * o.croppercent); $img.height(($imgheight / $imgwidth) * $img.width()); $this.css({ 'float': 'left', 'width': o.thumbwidth, 'height': o.thumbwidth, 'overflow': 'hidden', 'cursor': 'pointer' }); } else { $img.width(o.thumbwidth); $img.height(($imgheight / $imgwidth) * o.thumbwidth); $this.css({ 'float': 'left', 'cursor': 'pointer', 'width': $img.width(), 'height': $img.height() }); $this.height($img.height()); } $img.css({ 'width': $img.width(), 'height': $img.height() }); $this.click(function () { var x = $outer.find('.thumbs li').index($this); if (showing != x) { $orig.find('li').fadeOut(); $orig.find('li').eq(x).fadeIn(); showing = x; } }); }); var $thumb = $outer.find('.thumbs li'); $thumb.eq(0).addClass('on'); $thumb.not('.on').fadeTo(0, o.opacity); $thumb.click(function () { var t = $(this); var i = $thumb.index(this); if (current != i) { $thumb.removeClass('on'); t.addClass('on'); $thumb.not('.on').fadeTo(200, o.opacity); current = i; } }).hover(function () { $(this).stop().fadeTo(200, 1); $(this).click(); }, function () { $(this).not('.on').stop().fadeTo(200, o.opacity); }); } } }); })(jQuery); That should do the trick. I realy would like to see the issue completely solved , so it works directly after the first click on a thumbnail image. Link to comment Share on other sites More sharing options...
oscMarket Posted May 11, 2013 Share Posted May 11, 2013 Issue SOLVED instaed of: <script> $(window).load(function() { $('a.menu').on("click", function(e){ e.preventDefault(); //var mytest = $(this).data("path"); //var id = $(this).attr('id'); // alert(id); // gets the id of a clicked link that has a class of menu $('a.menu').fancybox(); }); }); </script> Use: <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> The fancybox doesn't need a click event to be triggered. YIHAA!!!!!!! :boom: Link to comment Share on other sites More sharing options...
♥joli1811 Posted May 11, 2013 Share Posted May 11, 2013 Hi Henry, Congratulations thought it was loading to late great work. Regards Joli To improve is to change; to be perfect is to change often. Link to comment Share on other sites More sharing options...
dvale Posted May 12, 2013 Author Share Posted May 12, 2013 Thanks to all. Specially to White. A+1 Regards, Paul Link to comment Share on other sites More sharing options...
dvale Posted May 12, 2013 Author Share Posted May 12, 2013 I'm not sure where to place that code. I replaced the code in ext / jquery / bxGallery / jquery.bxGallery.1.1.min for the one you wrote. This is what I have in product_info.php <script type="text/javascript"><!-- function popupWindow(url) { window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150') } //--></script> <?php echo tep_draw_content_top();?> <?php if ($product_check['total'] < 1) { ?> <?php echo tep_draw_title_top();?> <h1><?php echo TEXT_PRODUCT_NOT_FOUND; ?></h1> <?php echo tep_draw_title_bottom();?> <div class="contentContainer"> <div class="contentPadd"> <div class="buttonSet"> <span class="fl_right"><div class="bg_button2" onmouseout="this.className='bg_button2';" onmouseover="this.className='bg_button2-act';"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></div></span> </div> </div> </div> <?php } else { $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, pd.products_description_2, pd.products_description_3, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'"); $product_info = tep_db_fetch_array($product_info_query); tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'"); if ($new_price = tep_get_products_special_price($product_info['products_id'])) { $products_price = ' <span class="productSpecialPrice fl_left">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span> <del class="fl_left">' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del>'; } else { $products_price = '<span class="productSpecialPrice">' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>'; } if (tep_not_null($product_info['products_model'])) { $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>'; } else { $products_name = $product_info['products_name']; } // PRODUCTS SHIP FREE START if(tep_products_ship_free_check($product_info['products_id'])) $products_name .= '<br /><span class="smallText">' . TEXT_PRODUCT_SHIPS_FREE . '</span>'; // PRODUCTS SHIP FREE END ?> <?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?> <div class="contentContainer page_un"> <div class="contentPadd extra-3"> <div class="prods_content prods_info decks"> <div class="forecastle"> <ol class="masthead"> <li class="port_side"> <?php if (tep_not_null($product_info['products_image'])) { $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order"); ?> <?php if (tep_db_num_rows($pi_query) > 0) { ?> <div id="piGal"> <ul> <?php $pi_counter = 0; while ($pi = tep_db_fetch_array($pi_query)) { $pi_counter++; $pi_entry = ' <li class="wrapper_pic_div"><a href="'; if (tep_not_null($pi['htmlcontent'])) { $pi_entry .= '#piGalimg_' . $pi_counter; } else { $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false); } $pi_entry .= '" target="_blank" rel="fancybox" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;">' . tep_image(DIR_WS_IMAGES . $pi['image'], '', (PROD_INFO_IMAGE_WIDTH + 2), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"') . '</a>'; if (tep_not_null($pi['htmlcontent'])) { $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>'; } $pi_entry .= '</li>'; echo $pi_entry; } ?> </ul> </div> <script type="text/javascript"> $(function(){ $('#piGal ul').bxGallery({ maxwidth: '', maxheight: '', thumbwidth: <?php echo (($pi_counter > 1) ? '72' : '0'); ?>, thumbcontainer: 245, load_image: 'ext/jquery/bxGallery/spinner.gif' }) }); </script> <?php } else { // $image_width = (PROD_INFO_IMAGE_WIDTH +(262 - PROD_INFO_IMAGE_WIDTH)); ?> <?php echo '<div id="piGal" class="wrapper_pic_div border-img" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"><a class="prods_pic_bg" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), (PROD_INFO_IMAGE_WIDTH), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"', '', '') . '</a></div>'; ?> <?php } ?> <script type="text/javascript"> $("#piGal a[rel^='fancybox']").fancybox({ cyclic: true }); </script> <?php } ?> Where should I place this code?? <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> Link to comment Share on other sites More sharing options...
oscMarket Posted May 12, 2013 Share Posted May 12, 2013 In your case (oscommerce 2.3) in includes/template_top.php right below: <?php echo $oscTemplate->getBlocks('header_tags'); ?> </head> <body> So it looks like: <?php echo $oscTemplate->getBlocks('header_tags'); ?> </head> <body> <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> Link to comment Share on other sites More sharing options...
oscMarket Posted May 12, 2013 Share Posted May 12, 2013 @@dvale i was so free to took your current js file and adapt it to the oscommerce version you used. Try again with this one: FOR osCommerce 2.3.1 /* bxGallery v1.1 Plugin developed by: Steven Wanderski http://bxgalleryplugin.com http://stevenwanderski.com Released under the GPL license: http://www.gnu.org/licenses/gpl.html */ (function ($) { $.fn.extend({ bxGallery: function (options) { var defaults = { maxwidth: '', maxheight: '', thumbwidth: 200, thumbcrop: false, croppercent: .35, thumbplacement: 'bottom', thumbcontainer: '', opacity: .7, load_text: '', load_image: 'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif', wrapperclass: 'outer' } var options = $.extend(defaults, options); var o = options; var cont = ''; var caption = ''; var $outer = ''; var $orig = this; var tall = 0; var wide = 0; var showing = 0; var i = 0; var k = $orig.find('img').size(); var current; preload_img(); function preload_img() { $orig.hide(); if (o.load_text != '') { $orig.before('<div id="loading">' + o.load_text + '</div>'); } else { $orig.before('<div id="loading"><img src="' + o.load_image + '" /></div>'); } $orig.parent().find('#loading').css({ 'textAlign': 'center', 'width': o.maxwidth }); $orig.find('img').each(function () { var the_source = $(this).attr('src'); var the_img = new Image(); the_img.onload = function () { preload_check(); }; the_img.src = the_source; }); } function preload_check() { i++; if (i == k) { init(); } } function init() { set_layout(); set_main_img(); place_thumbcontainer(); set_thumbs(); } function set_layout() { $orig.parent().find('#loading').hide(); $orig.show(); $orig.wrap('<div class="' + o.wrapperclass + '"></div>'); $outer = $orig.parent(); $orig.find('li').css({ 'position': 'absolute' }); } function set_main_img() { $orig.find('img').each(function () { var $this = $(this); var $imgheight = $this.height(); var $imgwidth = $this.width(); if ($this.attr('title') != '') { caption = $this.attr('title'); $this.parent().append('<div class="caption">' + caption + '</div>'); } if (o.maxwidth != '') { if ($this.width() > o.maxwidth) { $this.width(o.maxwidth); $this.height(($imgheight / $imgwidth) * o.maxwidth); } } if (o.maxheight != '') { if ($this.height() > o.maxheight) { $this.height(o.maxheight); $this.width(($imgwidth / $imgheight) * o.maxheight); } } if ($this.height() + $this.parent().find('.caption').height() > tall) { tall = $this.height() + $this.parent().find('.caption').height(); } if ($this.width() > wide) { wide = $this.width(); } cont += '<li><a href="' + $this.attr('src') + '" class="menu" target="_blank" rel="fancybox"><img src="' + $this.attr('src') + '"/></a></li>'; //cont += '<li><img src="' + $this.attr('src') + '" /></li>'; }); $orig.find('li:not(:first)').hide(); $orig.height(tall); $orig.width(wide); $outer.find('.caption').width(wide); } function place_thumbcontainer() { if (o.thumbplacement == 'top') { $outer.prepend('<ul class="thumbs">' + cont + '</ul>'); $outer.find('.thumbs').css({ 'overflow': 'auto' }); } else if (o.thumbplacement == 'left') { $outer.prepend('<ul class="thumbs">' + cont + '</ul>'); $orig.css({ 'float': 'left' }); $outer.find('.thumbs').css({ 'float': 'left' }); } else if (o.thumbplacement == 'bottom') { $outer.append('<ul class="thumbs">' + cont + '</ul>'); } else if (o.thumbplacement == 'right') { $outer.append('<ul class="thumbs">' + cont + '</ul>'); $orig.css({ 'float': 'left' }); $outer.find('.thumbs').css({ 'float': 'left' }); } $outer.append('<div style="clear:both"></div>'); if (o.thumbcontainer != '') { $outer.find('.thumbs').width(o.thumbcontainer); } } function set_thumbs() { $outer.find('.thumbs li').each(function () { var $this = $(this); var $img = $this.find('img'); var $imgwidth = $img.width(); var $imgheight = $img.height(); if (o.thumbcrop) { $img.width($imgwidth * o.croppercent); $img.height(($imgheight / $imgwidth) * $img.width()); $this.css({ 'float': 'left', 'width': o.thumbwidth, 'height': o.thumbwidth, 'overflow': 'hidden', 'cursor': 'pointer' }); } else { $img.width(o.thumbwidth); $img.height(($imgheight / $imgwidth) * o.thumbwidth); $this.css({ 'float': 'left', 'cursor': 'pointer' }); $this.height($img.height()); } $this.click(function () { var x = $outer.find('.thumbs li').index($this); if (showing != x) { $orig.find('li').fadeOut(); $orig.find('li').eq(x).fadeIn(); showing = x; } }); }); var $thumb = $outer.find('.thumbs li'); $thumb.eq(0).addClass('on'); $thumb.not('.on').fadeTo(0, o.opacity); $thumb.click(function () { var t = $(this); var i = $thumb.index(this); if (current != i) { $thumb.removeClass('on'); t.addClass('on'); $thumb.not('.on').fadeTo(200, o.opacity); current = i; } }).hover(function () { $(this).stop().fadeTo(200, 1); $(this).click(); }, function () { $(this).not('.on').stop().fadeTo(200, o.opacity); }); } } }); })(jQuery); You can , as long as the file is not encoded , take a minified javascript file mostly named xxxx.min.js. Copy it to http://jsbeautifier.org/ and it will make your minified js nicely readable. Link to comment Share on other sites More sharing options...
dvale Posted May 13, 2013 Author Share Posted May 13, 2013 Thank you very much Henry, you nailed good. Only one little detail. They are opening on a different window as you described above. I tried both codes <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> .......and <script> $(window).load(function() { $('a.menu').on("click", function(e){ e.preventDefault(); //var mytest = $(this).data("path"); //var id = $(this).attr('id'); // alert(id); // gets the id of a clicked link that has a class of menu $('a.menu').fancybox(); }); }); </script> .....but I can't make the small thumbs to open in the fancybox. If you click on the main thumbnail on top it opens fine in the fancybox. I'm analyzing the code to see if I can find any reference I can use to make them open with the fancybox. Perhaps it is something that I need to configure in product_info I will keep you posted. Link to comment Share on other sites More sharing options...
dvale Posted May 13, 2013 Author Share Posted May 13, 2013 My friend Henry, ISSUE SOLVED. Let me show you what I had in my template_top.php <?php echo $oscTemplate->getBlocks('header_tags'); ?> </head> <?php if (( $tab_sel == tep_href_link(FILENAME_DEFAULT)) && (!isset($_GET['cPath'])) && (!isset($HTTP_GET_VARS['manufacturers_id']))) { ?> <body> <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> <?php }else{ ?> <body class="first_page"> <?php } ?> All I did was place the code further down as described below. <?php echo $oscTemplate->getBlocks('header_tags'); ?> </head> <?php if (( $tab_sel == tep_href_link(FILENAME_DEFAULT)) && (!isset($_GET['cPath'])) && (!isset($HTTP_GET_VARS['manufacturers_id']))) { ?> <body> <?php }else{ ?> <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> <body class="first_page"> <?php } ?> ....and somehow everything start working fine. Henry, you have no idea for how long I'm being looking for this to happen. I thought could be easy and simple but I just realize that it was not so. You're the man......................Case closed !! Link to comment Share on other sites More sharing options...
dvale Posted May 13, 2013 Author Share Posted May 13, 2013 Well, bugs started to coming up as expected. Not working with IE and my html embedded videos are not showing up. All I can say is that I'm getting closer. :( Link to comment Share on other sites More sharing options...
oscMarket Posted May 13, 2013 Share Posted May 13, 2013 I tested it in IE 10 , FireFox 21.0 and Chrome V 26xxxx. All 3 working. But yes you're right about the videos. I must admit that i noticed that and did not mentioned. On the other hand , i spend ed over 10 hours continuously on this issue, i think for me it is enough now :P . Link to comment Share on other sites More sharing options...
dvale Posted May 13, 2013 Author Share Posted May 13, 2013 That's correct my friend, you did your part and more. Take care! Regards, Paul Link to comment Share on other sites More sharing options...
oscMarket Posted May 13, 2013 Share Posted May 13, 2013 Try the following , perhaps this solves the IE10 issue : <?php echo $oscTemplate->getBlocks('header_tags'); ?> </head> <?php if (( $tab_sel == tep_href_link(FILENAME_DEFAULT)) && (!isset($_GET['cPath'])) && (!isset($HTTP_GET_VARS['manufacturers_id']))) { ?> <body> <?php }else{ ?> <body class="first_page"> <?php } ?> <script> $(window).load(function() { $("a.menu").fancybox(); }); </script> I don't think it have anything to do with your products_info.php and why you didn't updated your site with the code , cause i visit it constantly to see the end result. Link to comment Share on other sites More sharing options...
dvale Posted May 15, 2013 Author Share Posted May 15, 2013 Sorry for the delay. I've been full of work. To answer your question, I have to work on the html issue before to update the site with the new changes. What you did was perfect. I will try the code you wrote on top and at the same time I will update my site with the changes so you can check it out. I will work full time this weekend on that html issue to finally get everything up and running as I want it. Thanks for your concern, Regards, Paul Link to comment Share on other sites More sharing options...
dvale Posted May 15, 2013 Author Share Posted May 15, 2013 In return for your dedicated help, I would like to send something to you via email. Hope you like it. https://www.shopperstation.com/contact_us.php Regards, Paul Link to comment Share on other sites More sharing options...
dvale Posted May 15, 2013 Author Share Posted May 15, 2013 Well, I tried the code you suggested for the IE10 and is working funny. At first works fine, but once you refresh the page or change to another product, it goes back to wrong. I will keep playing with the position of the code to try to get it right. You can check it out now! The site is updated. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.