Jump to content
jools

Problem trying to re-use code php 'tile display code'

Recommended Posts

Hello all,

 

I have a piece of code (created by a developer, not myself) which displays images stored on a php / mySQL database. When the cursor goes over the images they 'flip' to display some information relating to that image.

 

The original purpose of this code was to display just one line of images. However, I would now like to display two lines of images. When I repeat the code, a couple of things happen which I don't want to happen.

 

  • The second line of images don't flip back to the original image when the cursor is removed from them.
  • The second line uses the same images as the first line. I would like separate images from the database to be chosen.

 

The problem can be seen here in this page:

 

http://www.senseiconnect.com/responsive%20design%20tutorial/%20OrangutanJapan%202014/OJ_template2_FlipONLY_HOME.php

 

As you can see, both rows are pulling the same random images (these change upon refresh) and the second (lower) row of images doesn't flip back to the image like the top row.

 

The code (not including CSS - let me know if that would help) is below:

<div class="boxLine"> <!--boxLine STARTS-->	<?php $i = 0; if (count($userTilesTop) > 0) foreach ($userTilesTop as $userTile){ $i++; ?>   <!--box6  STARTS--> <div class="box6" id="userTile<?php echo $i; ?>"<?php if (!empty($userTile['autonumber'])) { ?>onclick="javascript:window.location='http://www.orangutanjapan.com/newsearch/Ddetails_jp.php?pageNum_m=&language=&prefecture=&recordID=<?php echo $userTile['autonumber']; ?>';return false;"<?php } ?>>    	<div class="box6Inner"> <!--***********box6Inner STARTS**************-->            <div class='slide imageslide'> <!--slide imageslide  STARTS-->                <img src="http://www.orangutanenglish.com/upload/<?php echo $userTile['photoid']; ?>" alt="英会話レッスンの先生" width="136" height="116" />                <h3><?php echo ucwords($userTile['firstname']); ?> (<?php echo ucwords(eng2japPrefectures($userTile['prefecture'])); ?>)</h3>            </div> <!--slide imageslide  ENDS-->              	 <div class='slide textslide'> <!--slide textslide starts STARTS-->                <ul>                    <li>国籍: <?php echo $userTile['nationality']; ?></li>                    <li>対象言語: <?php echo $userTile['language']; ?></li>                    <li>教師経験(年): <?php echo $userTile['teachingexperience']; ?></li>                    <li>授業料: <?php echo $userTile['private_price']; ?>Y</li>                </ul>                <!-- userTileView STARTS--><div class="userTileView"><a href="<?php if (!empty($userTile['autonumber']))  { ?>  http://www.orangutanjapan.com/newsearch/Ddetails_jp.php?pageNum_m=&language=&prefecture=&recordID=<?php echo $userTile['autonumber'];  } ?>"><img src="http://www.orangutanjapan.com/user-profile-arrow.png" alt="View <?php echo ucwords($userTile['firstname']); ?>'s profile"></a></div><!--slide userTileView ENDS-->            </div> <!--slide textslide starts ENDS-->        </div> <!--***********box6Inner starts ENDS **************-->    </div> <!--box6 ENDS-->    <?php } ?> </div> <!--boxLine ENDS-->

Many thanks for taking time to read this post.

 

 

 

Share this post


Link to post
Share on other sites

If $userTilesTop is an array of images, you didn't show where you created that. Just copying and pasting that code would loop through the same array, the code to get those from the database is somewhere else. The same with the code to do the rollovers, I don't see that either.

  • Like 1

Share this post


Link to post
Share on other sites

Many thanks for the reply. Okay - code for the user tiles I think...

$userTiles = getAssocArr('SELECT DISTINCT autonumber, photoid, prefecture, firstname, nationality, language, teachingexperience,private_price FROM `TestTable` WHERE display = 1 AND date > date_sub(now(), interval 2 month) ORDER BY RAND() LIMIT 0,10');						$userTilesTop = array_slice($userTiles,0,6);		$userTilesBottom = array_slice($userTiles,6,6);

And the CSS for the rollovers,...

}.box6:hover {	cursor:pointer;	}.box6 .box6Inner {	position:absolute;	top:0;	left:0;	width:136px;	height:272px;}.box6 .slide {	width:136px;	height:136px;	color:#333;	text-align:left;	font-size:16px;	background-color: #FF6600;font-family: Meiryo;}.box6 .imageslide {	}.box6 .imageslide .image {background:#FEFEFE;	height:140px;	margin-bottom:5px}.box6 .textslide {	text-align:justify;}.box6 h3 {	font-family: Meiryo;	font-size: 13px;	font-weight: bold;	text-align: center;	vertical-align: middle;	margin:0px;	padding:0px;	padding-top: 2px;	color:#FFF;}.box6 .textslide ul {	background:#FFF;		margin-bottom: 2px;	padding-top:1px;	padding-bottom:4px;}.box6 .textslide ul li {	font-size: 13px;	font-weight: normal;	color: #000;	margin-left: 3px;	margin-top: 4px;	margin-bottom: 2px;	font-family: Meiryo;}.userTileView {	font-weight: bold;	color: #FFF;	background-color: #F60;	height: 20px;	width: 134px;	text-align:right}

Share this post


Link to post
Share on other sites

If $userTilesBottom is the other list you want to go through, you can copy the code and do a similar loop to loop through the other array.The only thing that CSS does for the rollover is change the cursor to a pointer, that's not changing the image.

  • Like 1

Share this post


Link to post
Share on other sites

thanks justsomeguy,

 

As you suggested, for the second bit of code, I used $userTilesBottom and changed the following code:

 

$userTiles = getAssocArr('SELECT DISTINCT autonumber, photoid, prefecture, firstname, nationality, language, teachingexperience,private_price FROM `TestTable` WHERE display = 1 AND date > date_sub(now(), interval 2 month) ORDER BY RAND() LIMIT 0,12'); $userTilesTop = array_slice($userTiles,0,6); $userTilesBottom = array_slice($userTiles,6,12);

 

This worked. Many thanks.

 

Also, I've located the code moving the tiles up and down - not php. I'm not sure why it's not flipping back up to the picture for the second row of images after the cursor moves off....?

<!--This java script is what allows the tiles to move up and down--><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" src="http://www.orangutanjapan.com/jquery.easing.1.3.js"></script><script type="text/javascript">	var userTileStates = {};	jQuery(document).ready(function(e) {				/* W Ver */		jQuery('.box6').mouseenter(function(x) {            //console.log("enter...");			//console.log(window.userTileStates);			window.userTileStates[jQuery(this).attr('id')] = true;						jQuery(".box6Inner",this).animate({'margin-top':'-116px'},500,'easeOutQuint',function(){							});			        }).mouseleave(function(y) {           // console.log("exit...");			//console.log(window.userTileStates);			var id = jQuery(this).attr('id');			window.userTileStates[jQuery(this).attr('id')] = false;			            setTimeout(function(){				if (!window.userTileStates[id]){					jQuery(".box6Inner",jQuery('#' + id)).animate({'margin-top':'0'},100,'easeOutQuint',function(){									});				}			},300);        });				    });</script><!--Here ends the JavaScript-->

thanks for your help.

Share this post


Link to post
Share on other sites

If you copy and paste the loop to display everything then it's probably going to create elements with duplicate IDs because the variable $i would get reset. You can either not reset $i on the second loop, or use something else for the element IDs (the autonumber column would make sense, if that is unique).

  • Like 1

Share this post


Link to post
Share on other sites

Fantastic. As you said, I removed the $i reset (i.e. took out $i = 0;) and then the second row behaved as the first.

 

Many thanks justsomeguy!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...