jQuery Info Content module

**prorock** · 09-30-2009, 01:34 PM

demo please

**spuavick** · 09-30-2009, 02:22 PM

i've only screens not demo available yet, at the one screen is used jQuery InfoContent with jQuery Login and the second screen jQuery InfoContent in action by clicking on the button to vote, where the votes had already been placed by the user.
Demo will be soon when I created own style for Pligg.

**spuavick** · 10-01-2009, 03:31 AM

if you want the system instead of a warning window appeared (alert box) a nice box with the relevant information you need to open the file /templates/xmlhttp.php and change all the function calls alert for example jqAlert, and then at the end of the file, add a function jqAlert:

Code:

function jqAlert(string) {
	var string = string;
	$(this).infoContent({
		title: 'ERROR',
		info: string,
		footer: 'Communication service of the cause of the error. Try to fix the error and try again...',
		fade: true,  // true for opacity background or false for non background
		akcja: 'start'
	});

**mwwoj** · 10-09-2009, 12:36 PM

Originally Posted by spuavick

if you want the system instead of a warning window appeared (alert box) a nice box with the relevant information you need to open the file /templates/xmlhttp.php and change all the function calls alert for example jqAlert, and then at the end of the file, add a function jqAlert:

Code:

function jqAlert(string) {
	var string = string;
	$(this).infoContent({
		title: 'ERROR',
		info: string,
		footer: 'Communication service of the cause of the error. Try to fix the error and try again...',
		fade: true,  // true for opacity background or false for non background
		akcja: 'start'
	});

Super module!

Hi, could you tell me how to use your module with upload module.
What I mean? When clicking on uploaded picture the picture opens in a new blank page.
How to use your module here to have the full picture opened in a pop-up box?

**spuavick** · 10-10-2009, 05:43 AM

You need to find an entry in the upload module, which refers to an alert, or functions responsible for the display pop-up box, and swap call this function on an own (example uploadBox), create a new feature in which you can use the jQuery method $.get and a callback function.

Example usage:

Code:

function uploadBox() {

	url = 'link_to_upload_module_pop_up_ box';
	parameteres = 'if exists use json method' // ex. ({id:id,option1='some_option', ...});
	
	$.get({url, parameters, 
		function(sResponse) {
			var content = sResponse
			$(this).infoContent({
				title: 'Upload',
				info: content,
				fade: true, // true or false, if true, adds a dark background will be transparent, if false, background is not
				footer: 'some info in the footer window'
			});
		}
	});
}

**mwwoj** · 10-10-2009, 07:58 AM

Originally Posted by spuavick

You need to find an entry in the upload module, which refers to an alert, or functions responsible for the display pop-up box, and swap call this function on an own (example uploadBox), create a new feature in which you can use the jQuery method $.get and a callback function.

Example usage:

Code:

function uploadBox() {

	url = 'link_to_upload_module_pop_up_ box';
	parameteres = 'if exists use json method' // ex. ({id:id,option1='some_option', ...});
	
	$.get({url, parameters, 
		function(sResponse) {
			var content = sResponse
			$(this).infoContent({
				title: 'Upload',
				info: content,
				fade: true, // true or false, if true, adds a dark background will be transparent, if false, background is not
				footer: 'some info in the footer window'
			});
		}
	});
}

could you do it for me, please

I could pay/donate via chipin, paypal

please answer via PM, :-)

**spuavick** · 10-10-2009, 01:50 PM

add the following code example at the end of the file jquery.infocontent-min.js

Code:

$(function(){
	$(".storycontent a > img").click(function(){
		var a = $(this).parent();
		var url = $(a).attr("href");
		  $(this).infoContent({
				  title: 'Photo', // you can change this
				  info: '<img src="'+url+'"/>',
				  footer: '' // some change in footer
			   });
			   $("div.info").css({"overflow":"hidden"}); // *
			   return false;
		   });

	});

* width of image, if more than 620, will be "cut off" if you change the background image, you can manually set the width of the frame by adding the option w: 800 at the end of the function call infoContent
example:

Code:

$(this).infoContent({
				  title: 'Photo', // you can change this
				  info: '<img src="'+url+'"/>',
				  footer: '' // some change in footer,
				  w: 800
			   });

You can see demo at this page Lewandowski: Nigdy nie marzyłem o grze w Legii - LegiaLive! - Serwis Kibiców Legii Warszawa | wysyp.com
But soon, this message will be deleted

--------------------
Finally, when I tested this with a module video_content have a problem with the link, it would be best to edit the file upload_thumb.tpl and lines 94 and 96 to add links such as a class

Code:

class = "upload-img"

o that the function jQuery would look like this:

Code:

$(function(){
	$("a.upload-img").click(function(){
		var url = $(this).attr("href");
		  $(this).infoContent({
				  title: 'Photo',
				  info: '<img src="'+url+'"/>'
			   });
			   $("div.info").css({"overflow-x":"hidden"});
			   return false;
		   });
	});

**mwwoj** · 10-11-2009, 12:00 PM

Originally Posted by spuavick

add the following code example at the end of the file jquery.infocontent-min.js

Thanks for your post!

I have no idea where jquery.infocontent-min.js is, :-(

What upload module you use? Standard one included in 1.0.1? Or PliggMediaMaster (PliggShop)?

Originally Posted by spuavick

You can see demo at this page Lewandowski: Nigdy nie marzyłem o grze w Legii - LegiaLive! - Serwis Kibiców Legii Warszawa | wysyp.com
But soon, this message will be deleted

--------------------

Super page! Sure you can delete the link :-) Thanks for sharing!

By the way, I have spotted one nice function on your page. When mouse is on "story summarry" a buttun "Wiecej" (read more?) shows. How have you done it?

Originally Posted by spuavick

Finally, when I tested this with a module video_content have a problem with the link, it would be best to edit the file upload_thumb.tpl and lines 94 and 96 to add links such as a class

Code:

class = "upload-img"

o that the function jQuery would look like this:

Code:

$(function(){
	$("a.upload-img").click(function(){
		var url = $(this).attr("href");
		  $(this).infoContent({
				  title: 'Photo',
				  info: '<img src="'+url+'"/>'
			   });
			   $("div.info").css({"overflow-x":"hidden"});
			   return false;
		   });
	});

Sorry, still cannot make it work :-(

As I said before, I am open to pay/donate :-) Please just send me the ready-to-go code :-)

Once more congratulations on your page!

**spuavick** · 10-11-2009, 05:05 PM

Originally Posted by mwwoj

I have no idea where jquery.infocontent-min.js is, :-(

What upload module you use? Standard one included in 1.0.1? Or PliggMediaMaster (PliggShop)?

Yes I use for this example a standard module upload for 1.0.1.
The file jquery.infocontent-min.js you find in
modules/jquery_infoContent/js/ directory

Originally Posted by mwwoj

By the way, I have spotted one nice function on your page. When mouse is on "story summarry" a buttun "Wiecej" (read more?) shows. How have you done it?

Yes is a read more

is very easy, here you have a sample code I wrote to get this effect, you can customize to your needs:

Code:

$(function(){
	$(".stories").hover(function(){
		$(this).find(".news-body-text span").append('<span class="more" style="background:#7ebe10;padding:1px 3px;margin:1px;color:#fff;font-weight:bold;">więcej <span class="raquo" style="color:#fc4000;">&raquo;</span></span>');
		$(this).find(".news-body-text span a").css({color:"#444"});
	},function(){
		$(this).find(".news-body-text span span.more").remove();
		$(this).find(".news-body-text span a").css({color:"#707070"});
	});
});

Originally Posted by mwwoj

Sorry, still cannot make it work :-(

As I said before, I am open to pay/donate :-) Please just send me the ready-to-go code :-)

ok so step by step to lead you how to do it ...

open the file /modules/upload/templates/upload_thumb.tpl in line 94, and 96 to link to

Code:

<a href =(...)

add a class to look like this

Code:

<a class = "upload-img" href = (.. .)

Pligg.tpl then open the file and before the </head> add a simple function

Code:

$(function(){
	$("a.upload-img").click(function(){
		var url = $(this).attr("href");
		  $(this).infoContent({
				  title: 'Photo',
				  info: '<img src="'+url+'"/>'
			   });
			   $("div.info").css({"overflow-x":"hidden"});
			   return false;
		   });
	});

Really needs to work

and do not need any more philosophy here

Originally Posted by mwwoj

Once more congratulations on your page!

thanks a lot

Thread: jQuery Info Content module

Mod Options

jQuery Info Content module

Download Now

Show Your Support

Similar Threads

Can anyone help with the Jquery Module???

Module Request: A jquery Featurify

jQuery Standalone Pligg Module

How to modify a module to use jQuery Plugin?

some help and info needed for new module

Posting Permissions