PHP + Javascript = Dynamic Feature Images

[D_Bac]

I'm going batty trying to figure this one out and I know it's a relatively simple solution. So I'm hoping someone here can point me in the right direction.

In a nutshell, I'm trying to replicate the changing feature images like you see on this site: www.vgpro.com

If you view the source, it calls a javascript file home.js that does all the dirty work while the dynamic news/links/etc information appears as splashes array in the page body.

Thing is, I've never really worked with javascript, much less getting my PHP code to work within it. Copying the JS is easy but getting it to work with content dynamically pulled via php is another. All I'm trying to do as an example is pull out the last four news items marked as featured with a php/mysql call and create the javascript array from the news id, link, title, etc. But I have no idea how to make php and javascript work together.

Any ideas?

[leatherback]

I had a quick peek at the mentioned website, but I cannot make out what you are trying to do. The whole website is full of images, and at a glance nothing requires javascript. Please descrbe your problem more clearly

[D_Bac]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

$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]

nope. You echo the $sides out.

[leatherback]

[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]

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]

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

[D_Bac]

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]

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]

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 ---
);

?>