Keyword

SIG under J! 1.5.2 legacy

  • Airton Torres
  • Airton Torres's Avatar Topic Author
  • Offline
  • New Member
More
16 years 1 month ago - 16 years 1 month ago #12760 by Airton Torres
SIG under J! 1.5.2 legacy was created by Airton Torres
Hi guys,
I'm trying to use SIG plugin in my J!1.5.2 site and so far I have managed to do it using legacy mode and some tweeking.  8)
First of all I made some changes to plugin_jw_sig.php and I could make the thumbnails to show in the article. The code is as follows:
<?php
    /*
    // "Simple Image Gallery" (in content items) Plugin for Joomla 1.0.x - Version 1.2.1
    // License: http://www.gnu.org/copyleft/gpl.html
    // Authors: Fotis Evangelou - George Chouliaras
    // Copyright (c) 2006 JoomlaWorks.net - https://www.joomlaworks.net
    // Project page at https://www.joomlaworks.net - Demos at http://demo.joomlaworks.net
    // ***Last update: January 6th, 2007***
    // Hacked for Joomla 1.5.  Must change the rootSite variable since there was
    // an issue with the global site var.
    // Hack by Airton
    */
    defined( '_JEXEC' ) or die( 'Restricted access' );
    $mainframe->registerEvent( 'onPrepareContent', 'jw_gallery' );
    function jw_gallery( &$row, &$params, $page=0 ) {
       $regex = "#{gallery}(.*?){/gallery}#s";
       $database = &JFactory::getDBO();
       $plugin =& JPluginHelper::getPlugin('content', 'plugin_jw_sig');
       $enabled = JPluginHelper :: isEnabled  ('content','plugin_jw_sig');
       if (!$enabled){
          $row->text = preg_replace( $regex, '' , $row->text );
          return;
       }
       
       $pluginParams = new JParameter( $plugin->params );
       $rootFolder = '/images/stories/';   
       $rootSite = '/YOUR/ROOT/DIR'; //IMPORTANT: No end slash!!!
       $_width_ = $pluginParams->def( 'th_width', 200 ); //$param->get('th_width', 200);
       $_height_ = $pluginParams->def( 'th_height', 200 );//$param->get('th_height', 200);
       $_quality_ = $pluginParams->def( 'th_quality', 80 );//$param->get('th_quality', 80);
       $displaynavtip = $pluginParams->def( 'displaynavtip', 1 );//$param->get('displaynavtip', 1);
       $navtip = $pluginParams->def( 'navtip', 'Dica de Navegção: Passe o mouse sobre o lado superior direito ou esquerdo da imagem para mover-se para a imagem seguinte ou anterior.' );//$param->get('navtip', 'Navigation tip: Hover mouse on top of the right or left side of the image to see the next or previous image respectively.');
       $displaymessage = $pluginParams->def( 'displaymessage', 1 );//$param->get('displaymessage', 1);
       $message = $pluginParams->def( 'message', 'Você está visuzalizando as imagens da galeria:' );//$param->get('message', 'You are browsing images from the article:');
       $html = '<!-- Starting Match -->';
          
       //if (preg_match_all("#{gallery}(.*?){/gallery}#s", $row->text, $matches, PREG_PATTERN_ORDER) > 0) {
       if(preg_match_all($regex, $row->text, $matches, PREG_SET_ORDER) > 0) {
         $sigcount = -1;
         foreach ($matches as $match) {
          $sigcount++;
          $_images_dir_ = preg_replace("/{.+?}/", "", $match[1]);
          unset($images);
          $noimage = 0;
          // read directory
          
           if ($dh = opendir($rootSite.$rootFolder.$_images_dir_)) {
              while (($f = readdir($dh)) !== false) {
                if((substr(strtolower($f),-3) == 'jpg') || (substr(strtolower($f),-3) == 'gif') || (substr(strtolower($f),-3) == 'png')) {
                     $noimage++;
                     $images[] = array('filename' => $f);
                     array_multisort($images, SORT_ASC, SORT_REGULAR);
                }
              }
              closedir($dh);
            }
          $itemtitle = preg_replace("/\"/", "'", $row->title);   
          if($noimage) {
              $html = '
    <!-- JW "Simple Image Gallery" Plugin (v1.2.1) starts here -->
    <link href="'.JURI::base(true).'/plugins/content/plugin_jw_sig/sig.css" rel="stylesheet" type="text/css" />
    <style type="text/css">.sig_cont {width:'.($_width_+30).'px;height:'.($_height_+20).'px;}</style>
    <!-- <script type="text/javascript" src="'.JURI::base(true).'/plugins/content/plugin_jw_sig/mootools.js"></script> -->
    <script type="text/javascript" src="'.JURI::base(true).'/plugins/content/plugin_jw_sig/slimbox.js"></script>
    <div class="sig">';
            for($a = 0;$a<$noimage;$a++) {
               if($images[$a]['filename'] != '') {
                 $html .= '<div class="sig_cont"><div class="sig_thumb"><a href="'.JURI::base(true).$rootFolder.$_images_dir_.'/'.$images[$a]['filename'].'" rel="lightbox[sig'.$sigcount.']" title="';
                if ($displaynavtip) {$html .= $navtip.'

';}
                if ($displaymessage) {$html .= $message.'
<b>'.$itemtitle.'</b>';}         
                else {$html .= '<b>'.$images[$a]['filename'].'</b>';}
                $html .= '" alt="';
                   if ($displaymessage) {$html .= $message.' '.$itemtitle.'';}         
                   else {$html .= $images[$a]['filename'];}
                   $html .= '" target="_blank"><img src="'.JURI::base(true).'/plugins/content/plugin_jw_sig/showthumb.php?img='.$_images_dir_.'/'.$images[$a]['filename'].'&width='.$_width_.'&height='.$_height_.'&quality='.$_quality_.'"></a></div></div>';
                  }
               }
                $html .="\n<div class=\"sig_clr\"></div>\n</div>\n<!-- JW \"Simple Image Gallery\" Plugin (v1.2.1) ends here -->";
             }
              $row->text = preg_replace( "#{gallery}".$_images_dir_."{/gallery}#s", $html , $row->text );
          }     
      }
    }
?>

After making those changes I stuck with a problem that the lightbox wouldn't show. The image simply opened in a new window and there was a small white box in the top center of the main page. I tryed all the solutions in this forum without luck. ???

Since I couldn't find any other modules or whatever that could be interfering in the plugin (besides a clean J! install the only comp installed is DocMan), I decided to try working with the slidebox.js

I know nothing about JS so all I did was replace it by the slimbox.js that comes with "Slimbox Image Gallery Plugin for Joomla! v 1.5" whitch is J!1.5 native. It solved most of the problems. The slimbox now show, but the footer of the image with the text information and the close button don't show at all. :(

At this point I need your help! Can anybody take a look a this problem, plz?  :-[

Here is the slimbox.js code:
/*
	Slimbox v1.41 - The ultimate lightweight Lightbox clone
	by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
	Inspired by the original Lightbox v2 by Lokesh Dhakar.
*/

var Lightbox = {

	init: function(options){
		this.options = $extend({
			resizeDuration: 400,
			resizeTransition: false,	// default transition
			initialWidth: 250,
			initialHeight: 250,
			animateCaption: true,
			showCounter: true
		}, options || {});

		this.anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^lightbox/i)){
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.position.bind(this);

		this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(document.body);

		this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).injectInside(document.body);
		this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
		this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.image);
		this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
		this.prevLink.onclick = this.previous.bind(this);
		this.nextLink.onclick = this.next.bind(this);

		this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).injectInside(document.body);
		this.bottom = new Element('div', {'id': 'lbBottom'}).injectInside(this.bottomContainer);
		new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div', {'id': 'lbCaption'}).injectInside(this.bottom);
		this.number = new Element('div', {'id': 'lbNumber'}).injectInside(this.bottom);
		new Element('div', {'styles': {'clear': 'both'}}).injectInside(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
			image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
			bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
		};

		this.preloadPrev = new Image();
		this.preloadNext = new Image();
	},

	click: function(link){
		if (link.rel.length == 8) return this.show(link.href, link.title);

		var j, imageNum, images = [];
		this.anchors.each(function(el){
			if (el.rel == link.rel){
				for (j = 0; j < images.length; j++) if(images[j][0] == el.href) break;
				if (j == images.length){
					images.push([el.href, el.title]);
					if (el.href == link.href) imageNum = j;
				}
			}
		}, this);
		return this.open(images, imageNum);
	},

	show: function(url, title){
		return this.open([[url, title]], 0);
	},

	open: function(images, imageNum){
		this.images = images;
		this.position();
		this.setup(true);
		this.top = window.getScrollTop() + (window.getHeight() / 15);
		this.center.setStyles({top: this.top, display: ''});
		this.fx.overlay.start(0.8);
		return this.changeImage(imageNum);
	},

	position: function(){
		this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});
	},

	setup: function(open){
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		});
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},

	keyboardListener: function(event){
		switch (event.keyCode){
			case 27: case 88: case 67: this.close(); break;
			case 37: case 80: this.previous(); break;	
			case 39: case 78: this.next();
		}
	},

	previous: function(){
		return this.changeImage(this.activeImage-1);
	},

	next: function(){
		return this.changeImage(this.activeImage+1);
	},

	changeImage: function(imageNum){
		if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
		this.step = 1;
		this.activeImage = imageNum;

		this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
		this.fx.image.hide();
		this.center.className = 'lbLoading';

		this.preload = new Image();
		this.preload.onload = this.nextEffect.bind(this);
		this.preload.src = this.images[imageNum][0];
		return false;
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.center.className = '';
			this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
			this.image.style.width = this.bottom.style.width = this.preload.width+'px';
			this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';

			this.caption.setHTML(this.images[this.activeImage][1] || '');
			this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Image '+(this.activeImage+1)+' of '+this.images.length);

			if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
			if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
			if (this.center.clientHeight != this.image.offsetHeight){
				this.fx.resize.start({height: this.image.offsetHeight});
				break;
			}
			this.step++;
		case 2:
			if (this.center.clientWidth != this.image.offsetWidth){
				this.fx.resize.start({width: this.image.offsetWidth, marginLeft: -this.image.offsetWidth/2});
				break;
			}
			this.step++;
		case 3:
			this.bottomContainer.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: ''});
			this.fx.image.start(1);
			break;
		case 4:
			if (this.options.animateCaption){
				this.fx.bottom.set(-this.bottom.offsetHeight);
				this.bottomContainer.style.height = '';
				this.fx.bottom.start(0);
				break;
			}
			this.bottomContainer.style.height = '';
		case 5:
			if (this.activeImage) this.prevLink.style.display = '';
			if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
			this.step = 0;
		}
	},

	close: function(){
		if (this.step < 0) return;
		this.step = -1;
		if (this.preload){
			this.preload.onload = Class.empty;
			this.preload = null;
		}
		for (var f in this.fx) this.fx[f].stop();
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		return false;
	}
};

window.addEvent('domready', Lightbox.init.bind(Lightbox));

Thanks in advance for any help!

Airton


P.S.: If you would like to take a look in the results, this is my site:
www.hotspothosting.com.br/act/index.php?option=com_content&view=article&id=12&Itemid=16

Please Log in or Create an account to join the conversation.

  • Airton Torres
  • Airton Torres's Avatar Topic Author
  • Offline
  • New Member
More
16 years 1 month ago - 16 years 1 month ago #12761 by Airton Torres
Replied by Airton Torres on topic Re: SIG under J! 1.5.2 legacy
Hey guys,

It's been almost a week since my original post in this topic and 'till now no replies.

I received an eMail from someone not member of this community who saw the post and offered to help me sort the problem out. I sent him the modifications I made to the bot and, before it could be delivered to him, he emailed me back with a recoded plugin that works wonderfully in Joomla!1.5 WITHOUT legacy mode.

He asked me to post here the URL for his blog where anyone interested can download the modified version.

caaron.blogspot.com

Best regards,

Airton

Please Log in or Create an account to join the conversation.

More
16 years 3 weeks ago #12762 by snadowitz
Replied by snadowitz on topic Re: SIG under J! 1.5.2 legacy
the Joomla community surely is great!!! - I tried this and although it did not work for me I cannot help but admire people for helping.

Snadowitz<br /><br />www.starcrossedtattoo.com - great art.....
www.thetaxback.co.uk - personal taxation matters
www.primalink.com.hk - awesome tattoos

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum