How to Display Image with gAjax RSS Ticker

[drakata]

1) Script Title: gAjax RSS Ticker (hosted)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...xrssticker.htm

3) Describe problem:

Is there a way to display images in my ticker feed? I copied code supplied on this thread :

http://www.dynamicdrive.com/forums/s...Displayer-v2-0

However this works for gAjax RSS Feeds Displayer v2.0, is there a way to do the same for gAjax RSS Ticker? This is what I tried yet it doesn't seem to work.

<script type="text/javascript">

var socialfeed=new gfeedrssticker("example2", "example2class", 3000, "_new")
socialfeed.addFeed("Slashdot", "http://feeds.feedburner.com/tar-home?format=xml") //Specify "label" plus URL to RSS feed
//Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime description") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(1)
socialfeed.onfeedload = function(){
	var $ = jQuery, $title = $(this.feedcontainer).find('.titlefield'), mw = $(this.feedcontainer).children().innerWidth() - 5, $p, $r;
	$.each(this.feeds, function(i, feed){
		$p = $(feed.content).find('img').eq(0).css({maxWidth: mw, height: 'auto', maxHeight: 210, width: 'auto'});
		$r = $p.parent('a').length? $p.parent('a') : $p;
		if($r.length){$title.eq(i).before($('<div class="feedimage"></div>').append($r));}
	});
};
socialfeed.init() //Always call this last

</script>

Thank you for your help.

[jscheuer1]

The ticker works differently than the displayer and has had less updates. Because it works differently, an onitemload function is easier to program into it. But it has none. This version does and also includes an update similar to the displayer's for optional use of RegExp (right click and 'Save As'):

gajaxticker.js

Since the onitemload function fires each time an item is loaded into the ticker*, it has to be coded a little differently:

<script type="text/javascript">

var socialfeed=new gfeedrssticker("example2", "example2class", 3000, "_new")
socialfeed.addFeed("Slashdot", "http://feeds.feedburner.com/tar-home?format=xml") //Specify "label" plus URL to RSS feed
//Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime description") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(1)
socialfeed.onitemload = function(){
	var $ = jQuery, $title = $(this.feedcontainer).find('.titlefield'), mw = $(this.feedcontainer).children().innerWidth() - 5, $p, $r;
	(function(i, feed){
		$p = $(feed.content).find('img').eq(0).css({maxWidth: mw, height: 'auto', maxHeight: 210, width: 'auto'});
		$r = $p.parent('a').length? $p.parent('a') : $p;
		if($r.length){$title.before($('<div class="feedimage"></div>').append($r));}
	})(this.messagepointer, this.feeds[this.messagepointer]);
};
socialfeed.init() //Always call this last

</script>

Now, I'm not sure where you got the code that was in your post, but it looks like something I did, and as I recall, the description field was not being used. However, since in your code the description is being used, unless you want the image to appear twice, you will need to hide the second one. To do that add this to the stylesheet (where example2 is the unique id for that ticker):

#example2 img {
	display: none;
}

#example2 .feedimage img {
	display: block;
}

Or, you could use snippet instead of description, that would probably look better and be easier to format, and with many feeds would not be much different

As you hopefully already know, the onitemload code uses jQuery, which of course must be available to the page, you may use Google hosted jQuery by placing, for example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

in the head of the page, preferably before any other scripts there. If jQuery is already available to the page, skip this step.


The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.


*
onitemload is different than onfeedload. The displayer only pulls information from the feed once, so can use an onfeedload function, the ticker pulls information from the feed each time a single item is displayed.

[drakata]

Yes it was your code I found! I have been looking for this effect for my project, the above method works, the css is not a problem, you have no idea how much you have helped me. I was almost giving up and settling for another direction, much respect and thank you.

If I may be a pain, how would I go about putting an easing effect on the transitions?

[jscheuer1]

I'm not sure what you mean. There are no transitions. In jQuery the easing is the mathematical algorithm applied to a transition like fading or sliding. The default is what they call 'swing' (I think it's faster at the beginning and slows as the target state is neared, but I'm not sure, I just know it's nonlinear). I think the only other choice is 'linear' (the effect is applied to an equal degree during the entire time of transition). There are more of them available with the jQuery UI unit and/or other code written for jQuery that provide other optional easings. But jQuery itself has just the two.

What you probably mean is how to have a jQuery transition instead of just switching from one RSS feed item to the next by injecting in turn each formatted feed item into the feed container via its innerHTML property.

I played around with that idea over the weekend. To accommodate adding any code (jQuery or otherwise) for transitions, I added a beforeitem function and an optional boolean I called noautoload (which if set to true stops the injection of the formatted feed item as the feed container's innerHTML). I also arranged for both the new beforeitem and the onitemload functions to receive the formatted item as their sole parameter so it can potentially be used in other ways and/or at other times than the ticker script ordinarily would do.

Here's the modified ticker script:

gajaxticker.js

Here's how I utilized it to add optional jQuery transitions (notice the 2 highlighted configuration lines):

<script type="text/javascript">

var socialfeed=new gfeedrssticker("example2", "example2class", 6000, "_new")
socialfeed.addFeed("Slashdot", "http://feeds.feedburner.com/tar-home?format=xml") //Specify "label" plus URL to RSS feed
//Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(1)
socialfeed.noautoload = true;
socialfeed.beforeitem = function(item){
	var transition = 'slideUp'; // 'hide', 'show', 'fadeOut', 'slideUp', or 'slideDown'
	var duration = 900; // duration of the transition effect 'slow', 'normal', 'fast' or unquoted milliseconds
	var $ = jQuery, $fc = $(this.feedcontainer), $fimg = $(this.feeds[this.messagepointer].content).find('img').eq(0), $title, mw, $p, $r, $fcc,
	where = /hide|Out|Up/.test(transition)? 'prepend' : 'append', which = where === 'append'? 'last' : 'first', transitfunc;
	if(!this.wrapped){
		this.loadingwrap = $('<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>').append($fc.children()).appendTo($fc);
		$fc.css({position: 'relative', overflow: 'hidden'});
		this.wrapped = true;
	}
	if(!this.loadingwrap || this.feeds.length === $fc.children().length - 1){
		if(this.loadingwrap.length){this.loadingwrap.remove(); this.loadingwrap = 0;}
		if(where === 'append'){$fc.children().first().hide().appendTo($fc)[transition](duration);}
		else{$fc.children().last().show().prependTo($fc).next()[transition](duration);}
	} else {
		$fc[where]('<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">' + item + '</div>');
		$title = $fc.find('.titlefield')[which](); mw = $fc.children().innerWidth() - 5;
		$p = $fimg.css({maxWidth: mw, height: 'auto', maxHeight: 210, width: 'auto'});
		$r = $p.parent('a').length? $p.parent('a') : $p;
		if($r.length){$title.before($('<div class="feedimage"></div>').append($r));}
		$fcc = where === 'append'? $fc.children().last().css({visibility: 'hidden'}) : $fc.children().eq(1);
		transitfunc = where === 'append'? function(){$fcc.css({visibility: ''}).hide()[transition](duration);} : function(){$fcc[transition](duration);};
		if($fimg.length){
			$(new Image()).bind('load error', function(){
				transitfunc();
			}).attr('src', $fimg.attr('src'));
		} else {
			transitfunc();
		}
	}
};
socialfeed.init() //Always call this last

</script>

Here are the styles I used with the above:

#example2{ /*Demo 2 main container*/
width: 600px;
height: 290px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}

#example2 > div {
	margin: 4px;
	background-color: #EEEEEE;
}

#example2 ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

I elected to go with the snippet, but if you're using the description the container (#example2) will probably have to be taller, and you will need the image hiding css from before:

 #example2 img {
	display: none;
}

#example2 .feedimage img {
	display: block;
}