Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Problems to enlarge smaill thumbs images. Fancybox / bxGallery


dvale

Recommended Posts

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

/*
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Archived

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

×
×
  • Create New...