PHP database-driven carousel display

Does anyone know of a dynamic, PHP Carousel image display?  

Like this one:  http://codecanyon.net/item/all-around-jquery-content-slider-carousel/full_screen_preview/4809047

I am not able to convert this to a dynamic output.

Thanks!
ssailerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
There is some programming involved, and for that you might want to hire a professional programmer.  But I was able to install it on my server and get it to "work" given that I do not have the image files.  The Documentation link is helpful.
http://www.laprbass.com/RAY_temp_shindiri.php
0
ssailerAuthor Commented:
Ray, I don't see your example...???  Nothing shows up when I click the link.
0
Ray PaseurCommented:
Here is what I see.
<base href="http://www.shindiristudio.com/content_slider/" ></base>Here is the "view source"
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.shindiristudio.com/content_slider/" />
<title>Content Slider</title>

<link href="fonts/ostrich_sans/stylesheet.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet' type='text/css'>
<link href="css/content_slider_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.content_slider.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animate-colors.js" type="text/javascript"></script>
<script src="js/additional_content.js" type="text/javascript"></script>

<script type="text/javascript">
	(function($){
		$(document).ready(function() {
			var image_array = new Array();
			image_array = [
				{image: 'content/our_team/1.jpg', link_url: 'content/our_team/1big.jpg', link_rel: 'prettyPhoto'},
					// image for the first layer, goes with the text from id="sw0"
				{image: 'content/our_team/2.jpg', link_url: 'content/our_team/2big.jpg', link_rel: 'prettyPhoto'},
					// image for the second layer, goes with the text from id="sw1"
				{image: 'content/our_team/3.jpg', link_url: 'content/our_team/3big.jpg', link_rel: 'prettyPhoto'},
					// image for the third layer, goes with the text from id="sw2"
				{image: 'content/our_team/4.jpg', link_url: 'content/our_team/4big.jpg', link_rel: 'prettyPhoto'},
					// ...
				{image: 'content/our_team/5.jpg', link_url: 'content/our_team/5big.jpg', link_rel: 'prettyPhoto'},
				{image: 'content/our_team/6.jpg', link_url: 'content/our_team/6big.jpg', link_rel: 'prettyPhoto'},
				{image: 'content/our_team/7.jpg', link_url: 'content/our_team/7big.jpg', link_rel: 'prettyPhoto'}
			];
			$('#slider1').content_slider({		// bind plugin to div id="slider1"
				map : image_array,				// pointer to the image map
				max_shown_items: 7,				// number of visible circles
				hv_switch: 0,					// 0 = horizontal slider, 1 = vertical
				active_item: 0,					// layer that will be shown at start, 0=first, 1=second...
				wrapper_text_max_height: 450,	// height of widget, displayed in pixels
				middle_click: 1,				// when main circle is clicked: 1 = slider will go to the previous layer/circle, 2 = to the next
				under_600_max_height: 1200,		// if resolution is below 600 px, set max height of content
				border_radius:	-1,				// -1 = circle, 0 and other = radius
				automatic_height_resize: 1,
				border_on_off: 0,
				allow_shadow: 0
			});
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	})(jQuery);
</script>
<link href="css/doc_style.css" rel="stylesheet" type="text/css" />




</head>
<body>

<div class="selectors">
<h3 style="color:#313131;">Previews:</h3>
<a href="index.html">Our team</a> <a href="sidebar.html">Widget style</a> <a href="products.html">Products</a> <a href="portfolio.html">Portfolio</a> <a href="services.html">Services</a> <a href="vertical.html">Vertical</a> 
</div>
<img src="content/instructions/portfolio.png" alt="" />

<div class="content_slider_wrapper" id="slider1">

	<div class="circle_slider_text_wrapper" id="sw0" style="display: none;">
	<!-- content for the first layer, id="sw0" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Amanda McHilly</h3><br /><br />
			
			<span><span class="bold">Position: </span>Senior PHP Developer</span><br />
			<span><span class="bold">E-mail: </span><a href="#">amanda.mchilly@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>Amanda specializes in establishing and managing internal infrastructure and process for educational institutions, research centers, and non-profits. She is experienced in project management, finance, organizational leadership, and program implementation, all driven by a commitment to provide outstanding service.</span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>

	<div class="circle_slider_text_wrapper" id="sw1" style="display: none;">
	<!-- content for the second layer, id="sw1" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Ben Gillenhall</h3><br /><br />
			
			<span><span class="bold">Position: </span>Graphic/Web Designer</span><br />
			<span><span class="bold">Address: </span>North Road 17, 35100 Birmingham, England</span><br />
			<span><span class="bold">E-mail: </span><a href="#">ben.gillenhall@shindiristudio.com</a></span><br />
			<span><span class="bold">Web: </span><a href="#">gillenhall.shindiristudio.com</a></span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>

<div class="circle_slider_text_wrapper" id="sw2" style="display: none;">
	<!-- content for the third layer, id="sw2" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Giselle Smithsonian</h3><br /><br />
			
			<span><span class="bold">Position: </span>Company PR</span><br />
			<span><span class="bold">E-mail: </span><a href="#">giselle.smithsonian@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>Giselle takes great pride in the company's mission, and enjoys providing sound company structure while producing quality design for socially and environmentally conscious clients. Giselle also enjoys good type design, the beach, and Boston sports.</span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>

	<div class="circle_slider_text_wrapper" id="sw3" style="display: none;">
		<!-- content for the fourth layer, id="sw3" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Rafael Munez</h3><br /><br />
			
			<span><span class="bold">Position: </span>Audio/Visual Effects</span><br />
			<span><span class="bold">E-mail: </span><a href="#">rafael.munez@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>Born and raised in Rio de Janeiro, Brazil, Rafael moved to Washington, DC in 2006. He has a great interest in international development and is passionate about helping non-profit organizations and social businesses communicate their messages to the world. </span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>
	
	<div class="circle_slider_text_wrapper" id="sw4" style="display: none;">	
<!-- content for the fifth layer, id="sw4" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Brenda Wolsh</h3><br /><br />
			
			<span><span class="bold">Position: </span>CEO of Legal Department</span><br />
			<span><span class="bold">E-mail: </span><a href="#">brenda.wolsh@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>Brenda Wolsh is a communications expert turned bookkeeper, who also moonlights as a page layout consultant. She was Company's Business Director for over two years before starting her own bookkeeping consulting business. She thinks good communication and data can change the world.</span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>
	
	
	<div class="circle_slider_text_wrapper" id="sw5" style="display: none;">
<!-- content for the sixth layer, id="sw5" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Bradley Cooper</h3><br /><br />
			
			<span><span class="bold">Position: </span>Human Resources</span><br />
			<span><span class="bold">E-mail: </span><a href="#">bradley.cooper@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>Chemist, cultural events promoter, and now 1st string quarterback of the Company. Talking, stalking, locking, and rocking are his game. He's the guy who seeks out the problems of the world to which we apply our amazing talents to.</span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>

	<div class="circle_slider_text_wrapper" id="sw6" style="display: none;">
		<!-- content for the seventh layer, id="sw6" -->
		<div class="content_slider_text_block_wrap">
		<!-- "content_slider_text_block_wrap" is a div class for custom content -->
			<h3>Gillian Aston-Martin</h3><br /><br />
			
			<span><span class="bold">Position: </span>HTML/CSS Coder</span><br />
			<span><span class="bold">E-mail: </span><a href="#">gillian.aston-martin@shindiristudio.com</a></span><br /><br />
			<span><span class="bold">About: </span>My passion for what I do is borne out of my concern for others around the world. I truly believe that art is most effective at the consumer level, and I feel that it is my responsibility as an artist to continue the dialog between the artist and the consumer in order to create new perspective.</span><br /><br /><br />
			<a href="#" class="button_socials button_hover_effect fb" data-hovercolor="#496dba" data-hoveroutcolor="#3b5a9a"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect tw" data-hovercolor="#4bb8e7" data-hoveroutcolor="#23aae1"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect pin" data-hovercolor="#de343d" data-hoveroutcolor="#cc2129"></a><!-- button_socials button_hover_effect -->
			<a href="#" class="button_socials button_hover_effect yt" data-hovercolor="#fd0013" data-hoveroutcolor="#bb000e"></a><!-- button_socials button_hover_effect -->
		</div>
		<div class="clear"></div>	
	</div>

</div>

<div class="selectors">
<a href="documentation.html">Documentation</a>
</div>


</body>
</html>

Open in new window

HTH, ~Ray
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

ssailerAuthor Commented:
Right ... I see the documentation, but I do not see the dynamic slider that you created...???
0
Ray PaseurCommented:
It won't be visible unless you have image files. See line 23-35.  The base href tag is apparently not available to jQuery.  You might try installing the "view source" on your own server and putting the image URLs into those lines.
0
ssailerAuthor Commented:
I've made it database driven, but it won't loop through the recordset. I can get the recordset to loop if I output the query on a different part of the page, but not within the slider wrapper.    It just repeats the same first record over and over.  I think I'm close, but I just can't get it to loop...???    Any ideas?  The field css-id contains sw0, sw1, sw2, etc., so, theoretically, it should loop like the static pages do.  

My code below:

<?php do { ?>
<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
                  {image: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_rel: 'prettyPhoto'},
                        
                        // image for the third layer, goes with the text from id="sw2"
                        // if 'link_rel' is empty, zoom icon will open link instead of an image.
                        // 'main_link' is a link for a whole big circle, and it is
                        // available only if 'middle_click': 3 (see parameters list below).
                        // main_link_target: 0 = open link in the same window; 1 = in new tab
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 4,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>


<div class="content_slider_wrapper" id="slider1">
      <div class="circle_slider_text_wrapper" id="<?php echo $row_getProds['css-id']; ?>" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3><?php echo $row_getProds['productName']; ?></h3><br /><br />
                  <span><?php echo $row_getProds['description']; ?></span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
       
</div>
<?php } while ($row_getProds = mysql_fetch_assoc($getProds)); ?>
0
Ray PaseurCommented:
Please post a link so I can see the generated HTML, thanks.
0
ssailerAuthor Commented:
I'ts only on my localhost at this time.  Here is the HTML code output.  Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/ostrich_sans/stylesheet.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
      type='text/css'>
<link href="css/content_slider_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"
      charset="utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.content_slider.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animate-colors.js" type="text/javascript"></script>
<script src="js/additional_content.js" type="text/javascript"></script>
</head>

<body>

<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
                  {image: 'content/products/DSCN1378.jpg', link_url: 'content/products/DSCN1378.jpg', link_rel: 'prettyPhoto'},
                        
                        // image for the third layer, goes with the text from id="sw2"
                        // if 'link_rel' is empty, zoom icon will open link instead of an image.
                        // 'main_link' is a link for a whole big circle, and it is
                        // available only if 'middle_click': 3 (see parameters list below).
                        // main_link_target: 0 = open link in the same window; 1 = in new tab
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 4,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>


<div class="content_slider_wrapper" id="slider1">
      <div class="circle_slider_text_wrapper" id="sw0" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3>LG Optimus F3 4G LTE</h3><br /><br />
                  <span>Whenever single-loop learning strategies go wrong, the three cs - customers, competition and change - have created a new world for business to experience a profound paradigm shift. </span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
       
</div>
<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
                  {image: 'content/products/DSCN1385.jpg', link_url: 'content/products/DSCN1385.jpg', link_rel: 'prettyPhoto'},
                        
                        // image for the third layer, goes with the text from id="sw2"
                        // if 'link_rel' is empty, zoom icon will open link instead of an image.
                        // 'main_link' is a link for a whole big circle, and it is
                        // available only if 'middle_click': 3 (see parameters list below).
                        // main_link_target: 0 = open link in the same window; 1 = in new tab
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 4,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>


<div class="content_slider_wrapper" id="slider1">
      <div class="circle_slider_text_wrapper" id="sw1" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3>LG A340 GoPhone</h3><br /><br />
                  <span>Quantitative analysis of all the key ratios has a vital role to play in this organizations capable of double-loop learning, defensive reasoning, the doom loop and doom zoom. </span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
       
</div>
<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
                  {image: 'content/products/DSCN1398.png', link_url: 'content/products/DSCN1398.png', link_rel: 'prettyPhoto'},
                        
                        // image for the third layer, goes with the text from id="sw2"
                        // if 'link_rel' is empty, zoom icon will open link instead of an image.
                        // 'main_link' is a link for a whole big circle, and it is
                        // available only if 'middle_click': 3 (see parameters list below).
                        // main_link_target: 0 = open link in the same window; 1 = in new tab
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 4,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>


<div class="content_slider_wrapper" id="slider1">
      <div class="circle_slider_text_wrapper" id="sw2" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3>Nokia Lumia 1020 for AT&T (Yellow)</h3><br /><br />
                  <span>The vitality of conceptual synergies is of supreme importance taking full cognizance of organizational learning parameters and principles, working through a top-down, bottom-up approach.</span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
       
</div>
<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
                  {image: 'content/products/DSCN1404.jpg', link_url: 'content/products/DSCN1404.jpg', link_rel: 'prettyPhoto'},
                        
                        // image for the third layer, goes with the text from id="sw2"
                        // if 'link_rel' is empty, zoom icon will open link instead of an image.
                        // 'main_link' is a link for a whole big circle, and it is
                        // available only if 'middle_click': 3 (see parameters list below).
                        // main_link_target: 0 = open link in the same window; 1 = in new tab
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 4,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>


<div class="content_slider_wrapper" id="slider1">
      <div class="circle_slider_text_wrapper" id="sw3" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3>Nokia Lumia 521 No-Contract 4" Windows 8 Smartphone with T-Mobile Service</h3><br /><br />
                  <span>An investment program where cash flows exactly match shareholders' preferred time patterns of consumption exploiting the productive lifecycle as knowledge is fragmented into specialities. Building flexibility through spreading knowledge and self-organization, whenever single-loop learning strategies go wrong, to focus on improvement, not cost. </span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
       
</div>
       


<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html> 

Open in new window

Question edited to put the code into the code snippet, ~Ray
0
Ray PaseurCommented:
Why did you change the doctype?
0
ssailerAuthor Commented:
I don't recall changing it...???  Maybe it was like that before I saved it as a PHP file...???  Nothing intentional was done on my part.
0
Ray PaseurCommented:
It was an HTML5 doctype when I posted it.  These were the top five lines:

<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.shindiristudio.com/content_slider/" />
<title>Content Slider</title>

In the recent code sample, these are the top five lines:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

I don't know what all that stuff in the doctype is supposed to mean, but I know that when you change the doctype you're changing a lot of the rules about how HTML, JavaScript and CSS are supposed to be interpreted.
0
ssailerAuthor Commented:
This is so weird.  If you look at the source code, the HTML output, it DOES loop through the recordset.  I copied all of the source code and put it into an HTML file, so no PHP was involved, and it still does not loop correctly.  It shows only one photo and only one name and description ... even in HTML format.  Ugh!!!
0
ssailerAuthor Commented:
Aaaaaahhhhh ... I see the problem.  Just not sure how to fix it.
0
Ray PaseurCommented:
0
ssailerAuthor Commented:
Yes ... although, I just got the code to work with images AND content output.  I had to separate the recordsets and have TWO separate repeat regions (it just did not work when I tried to do it as one recordset).  I also had to tweak (within the code) where the recordsets started and ended their repeat.

Here is my source code:  
<?php require_once('../Connections/fusiontech.php'); ?>
<?php
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  $theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
        $theValue = ($theValue != "") ? "'" . date("Y-m-d",strtotime($theValue)) . "'" : "NULL";
      break;
      case "time":
        $theValue = ($theValue != "") ? "'" . date("H:i:s",strtotime($theValue)) . "'" : "NULL";
      break;
    case "datetime":
        $theValue = ($theValue != "") ? "'" . date("Y-m-d H:i:s",strtotime($theValue)) . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}


mysql_select_db($database_fusiontech, $fusiontech);
$query_getProds = "SELECT * FROM prods";
$getProds = mysql_query($query_getProds, $fusiontech) or die(mysql_error());
$row_getProds = mysql_fetch_assoc($getProds);
$totalRows_getProds = mysql_num_rows($getProds);

mysql_select_db($database_fusiontech, $fusiontech);
$query_getPics = "SELECT * FROM prods";
$getPics = mysql_query($query_getPics, $fusiontech) or die(mysql_error());
$row_getPics = mysql_fetch_assoc($getPics);
$totalRows_getPics = mysql_num_rows($getPics);
?>
<!DOCTYPE HTML>
<head>
<title>Untitled Document</title>
<link href="fonts/ostrich_sans/stylesheet.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
      type='text/css'>
<link href="css/content_slider_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"
      charset="utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.content_slider.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animate-colors.js" type="text/javascript"></script>
<script src="js/additional_content.js" type="text/javascript"></script>
</head>

<body>

<script type="text/javascript">
(function($){
      $(document).ready(function() {

            var image_array = new Array();
            image_array = [
            <?php do { ?>
                  {image: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_rel: 'prettyPhoto'},
            <?php } while ($row_getPics = mysql_fetch_assoc($getPics)); ?>                  
            ];
            $('#slider1').content_slider({      // bind plugin to div id="slider1"
                  map : image_array,            // pointer to the image map
                  max_shown_items: 5,            // number of visible circles
                  hv_switch: 0,                  // 0 = horizontal slider, 1 = vertical
                  active_item: 2,                  // layer that will be shown at start, 0=first, 1=second...
                  wrapper_text_max_height: 810,      // height of widget, displayed in pixels
                  middle_click: 1,            // when main circle is clicked:
                                          // 1 = slider will go to the previous circle, 2 = to the next,
                                          // 3 = open 'main_link', 0 = nowhere (no response)
                  border_radius: -1,            // -1 = circle, 0 and other = radius
                  auto_play: 1
            });
      });
})(jQuery);
</script>



<div class="content_slider_wrapper" id="slider1">
<?php do { ?>
      <div class="circle_slider_text_wrapper" id="<?php echo $row_getProds['css-id']; ?>" style="display: none;">

            <div class="content_slider_text_block_wrap">        
                  <h3><?php echo $row_getProds['productName']; ?></h3><br /><br />
                  <span><?php echo $row_getProds['description']; ?></span><br /><br /><br />
                  <a href="#" class="button_regular">More Info</a><!-- button_regular -->
        </div>
            <div class="clear"></div>      
      </div>

            <div class="clear"></div>      
<?php } while ($row_getProds = mysql_fetch_assoc($getProds)); ?>        
</div>


<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
<?php
mysql_free_result($getPics);
?>

It is now working just as I wanted it to!!!  FINALLY!!!  You definitely pointed me in the right direction, by suggesting I study the HTML source code that was output, so I will award points to you.  Thank you!  This will be so useful for future projects!!!  :)
0
Ray PaseurCommented:
Great!  Glad it's working out for you, ~Ray
0
ssailerAuthor Commented:
Thanks for pointing me in the right direction!!!  :D
0
ssailerAuthor Commented:
Ray suggested I look to the HTML code being output to determine why it was not work, which I did.  He pointed me in the right direction.
0
Ray PaseurCommented:
Thanks for the points! ~Ray
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.