PHP + Javascript = Dynamic Feature Images

D_Bac · Jun 10, 2008

Thanks for the response.

I'll try to describe it a bit clearer. At vgpro.com's homepage, there's a black box on the left with left and right arrows on the upper right portion of a graphic. If you watch it, the graphic and accompanying text cycles dynamically like a flash animation, only its being down with javascript.

The same thing is being done here: www.variety.com. It acts like flash, but it's not. It's actually pulling those stories from a database.

What I've found in my research is the way these things work is to use php to pull the article/image data from mysql and then write the results out in a JS array.

If you view the source on vgpro you'll see the arrays look like this:

<script language="JavaScript" type="text/javascript">
//<![CDATA[

                    var splashes=new Array();


                                                                                                                                                                                    splashes[0] = new Array();
                            splashes[0]['title'] = "Frontlines: Fuel of War Retail Patch 1.1.0";
                            splashes[0]['description'] = "Download the latest patch for the European and North American releases of Frontlines: Fuel of War. ";
                            splashes[0]['url'] = "http://www.vgpro.com/file/frontlines-fuel-of-war-retail-patch-110-useu";
                            splashes[0]['image'] = "http://www.vgpro.com/media/splash/frontlines_fuel_of_war_retail_pa_splash_large.jpg";
                            splashes[0]['more'] = "http://www.vgpro.com/images/icon/splash_file.gif";
                                                                    splashes[0]['link'] = "Download this File";

                                                            splashes[1] = new Array();
                            splashes[1]['title'] = "Devil May Cry 4 Demo";
                            splashes[1]['description'] = "Released by Capcom, try ten minutes of Devil May Cry 4 gameplay along with an epic boss battle. ";
                            splashes[1]['url'] = "http://www.vgpro.com/file/devil-may-cry-4-demo";
                            splashes[1]['image'] = "http://www.vgpro.com/media/splash/devil_may_cry_4_demo_splash_large.jpg";
                            splashes[1]['more'] = "http://www.vgpro.com/images/icon/splash_file.gif";
                                                                    splashes[1]['link'] = "Download this File";

                                                            splashes[2] = new Array();
                            splashes[2]['title'] = "Five Reason to be a Mac Gamer in 2008";
                            splashes[2]['description'] = "As the Mac market share grows, game publishers are beginning to realize that it's worth it to spend the extra money deve ...";
                            splashes[2]['url'] = "http://www.vgpro.com/article/5_reasons_to_be_a_mac_gamer_in_2";
                            splashes[2]['image'] = "http://www.vgpro.com/media/splash/five_reason_to_be_a_mac_gamer_in_splash_large.jpg";
                            splashes[2]['more'] = "http://www.vgpro.com/images/icon/splash_article.gif";
                                                                    splashes[2]['link'] = "Read Full Article";

                                                            splashes[3] = new Array();
                            splashes[3]['title'] = "Battlefield 2142 v1.50 Full Patch";
                            splashes[3]['description'] = "This patch adds two new community maps, no vehicles mode, and more. ";
                            splashes[3]['url'] = "http://www.vgpro.com/file/bf2142_update_150exe";
                            splashes[3]['image'] = "http://www.vgpro.com/media/splash/battlefield_2142_v150_full_patch_splash_large.jpg";
                            splashes[3]['more'] = "http://www.vgpro.com/images/icon/splash_file.gif";
                                                                    splashes[3]['link'] = "Download this File";

                                                            splashes[4] = new Array();
                            splashes[4]['title'] = "WoW just like Real Life?";
                            splashes[4]['description'] = "A few interesting and funny cross-over facts from WoW that seem all too familiar in the real world. ";
                            splashes[4]['url'] = "http://www.vgpro.com/article/why_world_of_warcraft_is_almost";
                            splashes[4]['image'] = "http://www.vgpro.com/media/splash/wow_just_like_real_life_splash_large.jpg";
                            splashes[4]['more'] = "http://www.vgpro.com/images/icon/splash_article.gif";
                                                                    splashes[4]['link'] = "Read Full Article";

//]]>

</script>

Does that help?

leatherback · Jun 11, 2008

ah, right.

Well..There eally is nothing magic into creating the javascript array. PhP just spits out the array, as if you were creating normal HTML. Before and after the array information you have some <script language="javascript"></script> tags.
You then need to find/write/download a rotator script, athat will change the content of a DIV in which you would like to display your content.

If I weer you I would have a look at hotscripts or dynamic drive, and look for text rotator scripts, read their documentation to get the structure for tha array (BAsically just copy the format they use in their example) and take it from there.

One step further -for future consideration- would be to use AJAX and really call the database each time to load a new newsitem. But if you are new to javascript, that would take a bit of tinkering, I think.

D_Bac · Jun 12, 2008

Thanks, I actually found a pre-packaged program that has me really close!

The last thing I need to figure out is how to get the DB query results to appear in an array.

$slides = array(

while($row = mysql_fetch_array($result))  {

			echo "array(";
				"slidelink" => "detail.php?sku=$row[ProductKey]",
				"title" => "$row[ProductName]",
				"category" => "$row[Genre]",
				"tagline" => "$row[Type]",
				"text" => "$row[Measurmnts]",
				"slideimage" => "$row[product_id].jpg"
			echo "),";

}

);

It doesn't like me running a WHILE inside the array. Any ideas anyone?

leatherback · Jun 12, 2008

yes. You are defining an array. Not sure what you are trying to do here though, so cannot really tell what you should do. What are you aiming at?

D_Bac · Jun 12, 2008

Here is the default code that came with the program for the array:

array(
					"slidelink" => "http://www.frontpageslideshow.net",
					"title" => "Frontpage Slideshow 1.7",
					"category" => "About Frontpage Slideshow",
					"tagline" => "Image taken from the movie \"Shoot 'em up\"",
					"text" => "\"Frontpage SlideShow\" is the most eye-catching way to display your featured articles, stories or even products in your php based website or CMS, like Time.com, Joost.com or Yahoo! Movies do. \"Frontpage SlideShow\" creates an uber-cool slideshow with text snippets laying on top of images. These \"slides\" are being rotated one after the other with a nice fade effect. The slideshow features navigation and play/pause buttons, so the visitor has complete control over the slideshow's \"playback\"! And best of all, Frontpage Slideshow can be skinned!",
					"slideimage" => "ao4.jpg"
				),

As you can see it's all hardcoded, and there are four arrays of that, one for each slide.

I'm trying to replace the four static arrays with four dynamic ones pulled from the DB. I have the query, and the code I posted earlier is plugging the results from the query into the array.

The problem is each of these four arrays sit within a large array, which you can see in the code. I just want the arrays to be created dynamically from the DB so I can populate the data on the fly.

PS: here's the error: Parse error: parse error, unexpected T_WHILE, expecting ')'

It doesn't like a WHILE statement in the array.

There has to be a way to do this. I just don't know the correct syntax.

leatherback · Jun 12, 2008

so.. why have the $slides = array(?
You need an echoed array, not an array in php

So.. keep in mind where you need what. All the element for javascript need to be send to the browser: echo 'slides = array(';

D_Bac · Jun 12, 2008

Well I'm pulling data OK, but the result isn't being read properly as JS.

Here's the result: http://www.fffmovieposters.com/slideshow.php

And here's the code:


$string = "Butterfield";
$result = mysql_query("select products_all.ProductKey, products_all.ProductName, products_all.Year, products_all.Type, products_all.PosterOrigin, products_all.Measurmnts, products_all.Size, products_all.Director, products_all.Actor0, products_all.Actor1, products_all.Actor2, products_all.Actor3, products_all.Actor4, products_all.Actor5 FROM products_all WHERE products_all.ProductName LIKE '%$string%'ORDER BY products_all.ProductName ASC LIMIT 4", $dbi);

echo "$slides = array(";
// --- Start slide list ---

while($row = mysql_fetch_array($result))  {

			// slide elements
			echo "array(
				\"slidelink\" => \"http://www.fffmovieposters.com/poster_detail.php?sku=$row[ProductKey]\",
				\"title\" => \"$row[ProductName]\",
				\"category\" => \"$row[Genre]\",
				\"tagline\" => \"$row[Type]\",
				\"text\" => \"$row[Measurmnts]\",
				\"slideimage\" => \"http://www.fffmovieposters.com/images2/small/$row[product_id].jpg\"
			),";

}

// --- End slide list ---
echo ");";

leatherback · Jun 12, 2008

looks like all your variables are empty to me.. Do you set slides somewhere? And the query does not return the right values (Look at image name)

D_Bac · Jun 12, 2008

leatherback wrote:
looks like all your variables are empty to me.. Do you set slides somewhere? And the query does not return the right values (Look at image name)

Had a typo on image. It's returning the right values. This is just test data and there are some holes. You can see a lot of actual data appearing so the query is good to go.

I'm not sure what you mean by set the slides. This is the only config page to determine what information is displayed. Gotta be just a couple syntax tweaks..

leatherback · Jun 12, 2008

you echo out the variable $slides

EITHER you mean to echo the word slides, which would make it a javascript variables (Note that afaik javascript does not use $ signs) or you need to give $signs a value before echo-ing it.

D_Bac · Jun 12, 2008

$slides is just a php variable that stores the JS array from what I can tell.

I'll keep playing around with it. Thanks for the help!

leatherback · Jun 12, 2008

nope. You echo the $sides out.

leatherback · Jun 12, 2008

[php
$string = "Butterfield";
$result = mysql_query("select products_all.ProductKey, products_all.ProductName, products_all.Year, products_all.Type, products_all.PosterOrigin, products_all.Measurmnts, products_all.Size, products_all.Director, products_all.Actor0, products_all.Actor1, products_all.Actor2, products_all.Actor3, products_all.Actor4, products_all.Actor5 FROM products_all WHERE products_all.ProductName LIKE '%$string%'ORDER BY products_all.ProductName ASC LIMIT 4", $dbi);

echo "
slides = array(";

// --- Start slide list ---

while($row = mysql_fetch_array($result)) {

			// slide elements

echo "array(
\"slidelink\" => \"http://www.fffmovieposters.com/poster_detail.php?sku=$row[ProductKey]\",
\"title\" => \"$row[ProductName]\",
\"category\" => \"$row[Genre]\",
\"tagline\" => \"$row[Type]\",
\"text\" => \"$row[Measurmnts]\",
\"slideimage\" => \"http://www.fffmovieposters.com/images2/small/$row[product_id].jpg\"
),";

}

// --- End slide list ---
echo ')';

[/code]

D_Bac · Jun 12, 2008

Got a bad character.

http://www.fffmovieposters.com/slideshow.php

Here's the FULL page source:

<?php
/* --------------------------------------------------------------------------------------------- */
/* ------------ Your slideshow content for this Frontpage Slideshow 1.7.x instance. ------------ */
/* --------------------------------------------------------------------------------------------- */

/*
*** TIP ***
-----------
To add more slides to your FPSS slideshow, simple copy/paste and then change per your needs the data blocks marked with "slide elements".
*/

[php
$string = "Butterfield";
$result = mysql_query("select products_all.ProductKey, products_all.ProductName, products_all.Year, products_all.Type, products_all.PosterOrigin, products_all.Measurmnts, products_all.Size, products_all.Director, products_all.Actor0, products_all.Actor1, products_all.Actor2, products_all.Actor3, products_all.Actor4, products_all.Actor5 FROM products_all WHERE products_all.ProductName LIKE '%$string%'ORDER BY products_all.ProductName ASC LIMIT 4", $dbi);

echo "
slides = array(";

// --- Start slide list ---

while($row = mysql_fetch_array($result)) {

// slide elements
echo "array(
\"slidelink\" => \"http://www.fffmovieposters.com/poster_detail.php?sku=$row[ProductKey]\",
\"title\" => \"$row[ProductName]\",
\"category\" => \"$row[Genre]\",
\"tagline\" => \"$row[Type]\",
\"text\" => \"$row[Measurmnts]\",
\"slideimage\" => \"http://www.fffmovieposters.com/images2/small/$row[product_id].jpg\"
),";

}

// --- End slide list ---
echo ')';

?>[/CODE]

leatherback · Jun 12, 2008

the [php [/code] code should not be there. I think the php tags didn't hold in my post

D_Bac · Jun 12, 2008

Looks like you got a similar result that I got.

I'm starting to wonder if this wasn't meant for dynamic population of arrays to begin with.

leatherback · Jun 12, 2008

as before: There is nothing special about javascript code. creating js array just requires carefully reproducing the structure required.
my example post was supposed to by in phpbb code, but I missed a ]

it is absolutely possible to create these arrays

D_Bac · Jun 12, 2008

I guess I'm just having a hard time grasping how you can create the 4 arrays embedded within the outer array, with dynamic data that all stores in that $slides php variable.

If you're curious, here it is working with hardcoded data:

http://www.fffmovieposters.com/slideshow2.php

And the code:

<?php
/* --------------------------------------------------------------------------------------------- */
/* ------------ Your slideshow content for this Frontpage Slideshow 1.7.x instance. ------------ */
/* --------------------------------------------------------------------------------------------- */

/*
*** TIP ***
-----------
To add more slides to your FPSS slideshow, simple copy/paste and then change per your needs the data blocks marked with "slide elements".
*/

$slides = array(
// --- Start slide list ---



			// slide elements
			array(
				"slidelink" => "http://www.frontpageslideshow.net",
				"title" => "Frontpage Slideshow 1.7",
				"category" => "About Frontpage Slideshow",
				"tagline" => "Image taken from the movie \"Shoot 'em up\"",
				"text" => "\"Frontpage SlideShow\" is the most eye-catching way to display your featured articles, stories or even products in your php based website or CMS, like Time.com, Joost.com or Yahoo! Movies do. \"Frontpage SlideShow\" creates an uber-cool slideshow with text snippets laying on top of images. These \"slides\" are being rotated one after the other with a nice fade effect. The slideshow features navigation and play/pause buttons, so the visitor has complete control over the slideshow's \"playback\"! And best of all, Frontpage Slideshow can be skinned!",
				"slideimage" => "ao4.jpg"
			),

			// slide elements
			array(
				"slidelink" => "http://www.frontpageslideshow.net",
				"title" => "Use Frontpage Slideshow on any PHP based site!",
				"category" => "About Frontpage Slideshow",
				"tagline" => "Image taken from the movie \"The Kingdom\"",
				"text" => "JoomlaWorks has developed this modification of Frontpage Slideshow to work on every website that supports PHP as a minimum requirement. We call this modification the \"Static PHP\" version of Frontpage Slideshow. It's ideal for use on non-Joomla!/Mambo websites, like for example your corporate PHP based website or your Wordpress blog or Drupal website! You can obviously use this version on any CMS that is based on PHP!",
				"slideimage" => "the_kingdom_20070820114258369.jpg"
			),				

			// slide elements
			array(
				"slidelink" => "http://www.frontpageslideshow.net/content/view/14/37/",
				"title" => "FPSS is Search Engine Friendly!",
				"category" => "About Frontpage Slideshow",
				"tagline" => "Image taken from the movie \"Invaders\"",
				"text" => "Unlike Flash based slideshows, Frontpage Slideshow uses unobtrusive javascript and some CSS wizardry only. The content of the slides is laid out as html code, which means it can be \"read\" by search engines. The proper usage (and order) of h1, h2, p (and more) tags will make sure Google (or any other search engine) regularly \"scans\" your latest/featured items.",
				"slideimage" => "TVD_TR_02183_2.jpg"
			),				

			// slide elements (***TIP***: copy this data block and paste it below itself to add more slides)
			array(
				"slidelink" => "http://www.joomlaworks.gr",
				"title" => "About JoomlaWorks",
				"category" => "",
				"tagline" => "Image taken from the movie \"Transformers\"",
				"text" => "JoomlaWorks is a team of professional web designers and developers dedicated to delivering high-quality extensions and templates for Joomla! (the most popular open source Content Management System (CMS) worldwide) and Mambo (award winning CMS). JoomlaWorks has established a solid reputation in the Joomla! & Mambo communities, having developed some of the most popular and innovative free & commercial extensions & templates, since 2006.",
				"slideimage" => "2007_transformers_014_1.jpg"
			),



// --- End slide list ---
);

?>

leatherback · Jun 12, 2008

I am trying, but cannot tell how your code fits in. It looks tome that your pre-packaged thing does not use javascript arrays? if you just need it in a php array, the story changes quite somewhat..

D_Bac · Jun 12, 2008

Those arrays are saved in the $slides variable which is called from another php page that does all the dirty work to build the slideshow. No, it doesn't look like they are JS arrays?

I don't want to post all the code for that, but here's an example so you can see $slides being called.

if($random_ordering) {shuffle($slides);}

// ---------------------------------- SLIDE OUTPUT ---------------------------------- //

$html = '';

// Start loop
$step = 1;
if($limitslides) {$i = 0;}

foreach ($slides as $slide) {

// Limit
if($limitslides) { if($i>=$limitslides) continue; }

// Slide data
$slidelink = $slide['slidelink'];
$slidetitle = $slide['title'];
$slidecategory = $slide['category'];
$slidetagline = $slide['tagline'];
$slidetext = preg_replace("/<img.+?>/", "", $slide['text']);
$slideimage = $slideimagefolder.$slide['slideimage'];

The page we're editing just sets the variables to define what appears.

PHP + Javascript = Dynamic Feature Images

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac

Lleatherback

DD_Bac