Τί είναι...??Γνωρίζετε??

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 06 Δεκ 2009 14:45

Υπάρχουν κάποια site όπως το sportfm.gr , το uefa.com, το sentragoal.gr που χρησιμοποιούν κάποια flash για να τραβάνε από τη βάση κάποια news και να τα παρουσιάζουν έτσι όπως τα παρουσιάζουν(αν ρίξετε μια ματιά θα καταλάβετε τί εννοώ). Ξέρει κάποιος αν υπάρχει κάποιο tutorial για να δημιουργηθεί κάτι τέτοιο? Γνωρίζει κανείς τι άλλο θα πρέπει να φτιαχτεί εκτός από το flashάκι? Πως δηλαδή θα συνδέεται με τη βάση μέσω php?

Ευχαριστώ πολύ!!


argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 07 Δεκ 2009 02:12

Αρχικά ευχαριστώ πολύ για την άμεση απάντηση σου!
Δεν είναι αυτό που έψαχνα ακριβώς...
Είναι κάτι σαν το http://smoothgallery.jondesign.net/
Κάτι σαν και αυτό θα ήθελα να φτιάξω..Απλά θέλω να το φτιάξω με τα δικά μου κριτήρια και ψάχνω να βρω κάποιο tutorial για να μάθω τα κατατόπια αυτού του είδους!

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Τί είναι...??Γνωρίζετε??

Δημοσίευση από dimsis » 07 Δεκ 2009 10:42

Αυτό που έδωσες δεν είναι flash αλλά mootools. Αν ψάχνεις κάτι τέτοιο δεν χρειάζεται να μπλέξεις με flash όπως αναφέρεις στο πρώτο σου μήνυμα.
Έχει διάφορα τέτοια scripts για sliding slideshows: http://webdesignfan.com/jquery-slider-t ... d-plugins/
Προτίμησε αυτά που βασίζονται σε jquery.

Αν θέλεις να φτιάξεις δικό σου τέτοιο μπορείς να χρησιμοποιήσεις κάποιο έτοιμο javascript framework ή να το γράψεις από το μηδέν με javascript και css.

Το να το κάνεις δυναμικό σε php (αν τελικά εννοείς αυτό) είναι επίσης εύκολο, απλώς αλλάζεις τα επαναλαμβανόμενα blocks κώδικα για κάθε slide με μεταβλητές της php που περιέχουν ας πούμε τα ονόματα των εικόνων, τους τίτλους κλπ.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 07 Δεκ 2009 18:28

Είσαι φοβερός...

Αυτό ακριβώς έψαχνα!!!

Θα δω πως μπορώ να το κάνω και μετά, θα προσπαθήσω να δω πως μπορώ να το κάνω να τραβάει δεδομένα και φωτογραφίες από μία βάση δεδομένων.


Πάντως χίλια ευχαριστώ!!!

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 07 Δεκ 2009 23:06

Νά'μαι πάλι.

Λοιπόν..Αντιμετωπίζω ένα μικρό πρόβλημα...

Βρήκα τον κώδικα και άρχισα να το φτιάχνω λιγάκι..Αρχικά να αναφέρω ότι έβγαλα όλα τα στατικά που είχε από μονος του ο κώδικας και έβαλα να τραβάει από μία βάση όλα τα στοιχεία που θέλω.Το πρόβλημα μου είναι ότι αφενός δεν εμφανίζονται οι εικόνες(στο μεγάλο παράθυρο,γιατί στο μικρό εμφανίζονται) και αφετέρου ότι στη δεξιά πλευρά του panel, εκεί που εμφανίζονται όλα τα δεδομένα που έχω επιλέξει εγώ να εμφανιστούν από τη βάση, θελω να εμφανίζεται ο τίτλος δίπλα από την εικόνα και όχι από πάνω που εμφανίζεται τώρα.

Αν μπορέσεις να με βοηθήσεις και σε αυτό...


Ο κώδικας ο νέος είναι ο εξής:

Κώδικας: Επιλογή όλων

<?php
require "usersdb.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Rotator w/ Teaser - CSS &amp; jQuery Tutorial</title>
<style type="text/css">
body &#123;
	background&#58; #1d1d1d;
	margin&#58; 0;
	padding&#58; 0;
	font&#58; 10px normal Arial, Helvetica, sans-serif;
	background-color&#58; #FFFFFF;
&#125;
* &#123;margin&#58; 0; padding&#58; 0; outline&#58; none;&#125;
img &#123;border&#58; none;&#125;
h1 &#123;
	font&#58; 3em normal Georgia, "Times New Roman", Times, serif;
	color&#58; #fff;
	text-align&#58; center;
	background&#58; url&#40;h1_bg.gif&#41; no-repeat;
	text-indent&#58; -99999px;
	margin&#58; 100px 0 10px;
&#125;
.container &#123;
	overflow&#58; hidden;
	width&#58; 900px;
	margin&#58; 0 auto;
&#125;
#main &#123;
	padding&#58; 10px;
	background&#58; #f0f0f0;
	border&#58; 1px solid #ccc;
&#125;
a &#123;color&#58; #fff;&#125;

/*--Main Image Preview--*/
.main_image &#123;
	width&#58; 598px; height&#58; 456px;
	float&#58; left;
	background&#58; #333;
	position&#58; relative;
	overflow&#58; hidden;
	color&#58; #fff;
&#125;
.main_image h2 &#123;
	font-size&#58; 2em;
	font-weight&#58; normal;
	margin&#58; 0 0 5px;	padding&#58; 10px;
&#125;
.main_image p &#123;
	font-size&#58; 1.2em;
	padding&#58; 10px;	margin&#58; 0;
	line-height&#58; 1.6em;
&#125;
.block small &#123; 
	padding&#58; 0 0 0 20px; 
	background&#58; url&#40;icon_calendar.gif&#41; no-repeat 0 center; 
	font-size&#58; 1em; 
&#125;
.main_image .block small &#123;margin-left&#58; 10px;&#125;
.main_image .desc&#123;
	position&#58; absolute;
	bottom&#58; 0;	left&#58; 0;
	width&#58; 100%;
	display&#58; none;
&#125;
.main_image .block&#123;
	width&#58; 100%;
	background&#58; #111;
	border-top&#58; 1px solid #000;
&#125;
.main_image a.collapse &#123;
	background&#58; url&#40;btn_collapse.gif&#41; no-repeat left top;
	height&#58; 27px; width&#58; 93px;
	text-indent&#58; -99999px;
	position&#58; absolute; 
	top&#58; -27px; right&#58; 20px; 
&#125;
.main_image a.show &#123;background-position&#58; left bottom;&#125; 


.image_thumb &#123;
	float&#58; left;
	width&#58; 299px;
	background&#58; #f0f0f0;
	border-right&#58; 1px solid #fff;
	border-top&#58; 1px solid #ccc;
&#125;
.image_thumb img &#123;
	border&#58; 1px solid #ccc; 
	padding&#58; 5px; 
	background&#58; #fff; 
	float&#58; left;
&#125;
.image_thumb ul &#123;
	margin&#58; 0; padding&#58; 0;
	list-style&#58; none;
&#125;
.image_thumb ul li&#123;
	margin&#58; 0; padding&#58; 12px 10px;
	background&#58; #f0f0f0 url&#40;nav_a.gif&#41; repeat-x;
	width&#58; 279px;
	float&#58; left;
	border-bottom&#58; 1px solid #ccc;
	border-top&#58; 1px solid #fff;
	border-right&#58; 1px solid #ccc;
&#125;
.image_thumb ul li.hover &#123;
	background&#58; #ddd;
	cursor&#58; pointer;
&#125;
.image_thumb ul li.active &#123;
	background&#58; #fff;
	cursor&#58; default;
&#125;
html .image_thumb ul li h2 &#123;
	font-size&#58; 1.5em; 
	margin&#58; 5px 0; padding&#58; 0;
&#125;
.image_thumb ul li .block &#123;
	float&#58; left; 
	margin-left&#58; 10px;
	padding&#58; 0;
	width&#58; 170px;
&#125;	
.image_thumb ul li p&#123;display&#58; none;&#125;



</style>
<!--Call jQuery-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;	

	//Show Banner
	$&#40;".main_image .desc"&#41;.show&#40;&#41;; //Show Banner
	$&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0.85 &#125;, 1 &#41;; //Set Opacity

	//Click and Hover events for thumbnail list
	$&#40;".image_thumb ul li&#58;first"&#41;.addClass&#40;'active'&#41;; 
	$&#40;".image_thumb ul li"&#41;.click&#40;function&#40;&#41;&#123; 
		//Set Variables
		var imgAlt = $&#40;this&#41;.find&#40;'img'&#41;.attr&#40;"alt"&#41;; //Get Alt Tag of Image
		var imgTitle = $&#40;this&#41;.find&#40;'a'&#41;.attr&#40;"href"&#41;; //Get Main Image URL
		var imgDesc = $&#40;this&#41;.find&#40;'.block'&#41;.html&#40;&#41;; 	//Get HTML of block
		var imgDescHeight = $&#40;".main_image"&#41;.find&#40;'.block'&#41;.height&#40;&#41;;	//Calculate height of block	
		
		if &#40;$&#40;this&#41;.is&#40;".active"&#41;&#41; &#123;  //If it's already active, then...
			return false; // Don't click through
		&#125; else &#123;
			//Animate the Teaser				
			$&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0, marginBottom&#58; -imgDescHeight &#125;, 250 , function&#40;&#41; &#123;
				$&#40;".main_image .block"&#41;.html&#40;imgDesc&#41;.animate&#40;&#123; opacity&#58; 0.85,	marginBottom&#58; "0" &#125;, 250 &#41;;
				$&#40;".main_image img"&#41;.attr&#40;&#123; src&#58; imgTitle , alt&#58; imgAlt&#125;&#41;;
			&#125;&#41;;
		&#125;
		
		$&#40;".image_thumb ul li"&#41;.removeClass&#40;'active'&#41;; //Remove class of 'active' on all lists
		$&#40;this&#41;.addClass&#40;'active'&#41;;  //add class of 'active' on this list only
		return false;
		
	&#125;&#41; .hover&#40;function&#40;&#41;&#123;
		$&#40;this&#41;.addClass&#40;'hover'&#41;;
		&#125;, function&#40;&#41; &#123;
		$&#40;this&#41;.removeClass&#40;'hover'&#41;;
	&#125;&#41;;
			
	//Toggle Teaser
	$&#40;"a.collapse"&#41;.click&#40;function&#40;&#41;&#123;
		$&#40;".main_image .block"&#41;.slideToggle&#40;&#41;;
		$&#40;"a.collapse"&#41;.toggleClass&#40;"show"&#41;;
	&#125;&#41;;
	
&#125;&#41;;//Close Function
</script>
</head>

<body>
<div class="container">

	<h1>Image Gallery w/ Teaser - CSS &amp; jQuery Tutorial<small>by Soh Tanaka</small></h1>
</div>
<div id="main" class="container">
	<div class="main_image">
		<img src="banner1.jpg"/>
		<div class="desc">
			<a href="#" class="collapse">Close Me!</a>

			<div class="block">
			</div>
		</div>

	</div>
	<div class="image_thumb">
    
					
<?php
$result = mysql_query&#40;"SELECT * FROM gallery ORDER BY image_item desc limit 4"&#41;;
while&#40;$row = mysql_fetch_array&#40;$result&#41;&#41;
echo "
<ul>
<li>
<div class=\"block\">
<h2>".$row&#91;'image_name'&#93;."</h2>
<p>".$row&#91;'image_desc'&#93;."</p>
<a href=\"#\" title='".$row&#91;'image_name'&#93;."' class=\"open\"></a>
<a href=\"banner1.jpg\"><img src=\"thumb.php?file=images/".$row&#91;'image_item'&#93;."&sizex=100&sizey=75\" class=\"full\" /></a>
</div>
</li>
</ul>
";
?>
</div>
</div>
</body>
</html>

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 07 Δεκ 2009 23:26

Το δεύτερο μου πρόβλημα τελικά το έλυσα αυτό με τη φωτογραφία και τον τίτλο(όσον αφορά την στοίχισή τους).

Το πρόβλημα μου όπως είπα και πριν είναι ότι δεν μπορώ να εμφανίσω στο μεγάλο panel τη φωτογραφία που έχω επιλέξει. Όπως και κάτι ακόμα.Με το που ανοίγει η σελίδα μου λογικά θα έπρεπε να φαίνεται η πρώτη φωτογραφία αλλά και το κείμενο που έχω στη βάση. Τώρα δεν εμφανίζεται τίποτα. Για να εμφανιστεί το κείμενο θα πρέπει πρώτα να πατήσω σε μία άλλη μικρή εικονίτσα από το δεξί panel και μετά όλα κομπλέ, εκτός βέβαια από τη φωτογραφία στο αριστερό panel.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Τί είναι...??Γνωρίζετε??

Δημοσίευση από dimsis » 08 Δεκ 2009 09:15

Κάνε έναν κόπο και ανέβασε και την usersdb.php και την βάση αν θέλεις. Αυτό που είδα έτσι με μια ματιά στον κώδικα σου αλλά χωρίς να μπορώ να δοκίμασω.

Κώδικας: Επιλογή όλων

<?php
$result = mysql_query&#40;"SELECT * FROM gallery ORDER BY image_item desc limit 4"&#41;;
while&#40;$row = mysql_fetch_array&#40;$result&#41;&#41;
echo "
<ul>
<li>
ΒΑΛΕ ΜΟΝΟ ΕΔΩ ΤΟ A HREF ΠΟΥ έχεις πιο κάτω &#40; <a href=\"#\" title='".$row&#91;'image_name'&#93;."' class=\"open\"><img src=\"thumb.php?file=images/".$row&#91;'image_item'&#93;."&sizex=100&sizey=75\" class=\"full\" /></a> &#41;
<div class=\"block\">
<h2>".$row&#91;'image_name'&#93;."</h2>
<p>".$row&#91;'image_desc'&#93;."</p>
</div>
</li>
</ul>
";
?>

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 08 Δεκ 2009 12:03

Λοιπόν ο κώδικας της usersdb.php απλά κάνει τη σύνδεση στη βάση και την έχω κάνει έτσι :

Κώδικας: Επιλογή όλων

<?php
$mysql_host = "localhost";
$mysql_username = "root";
$mysql_password = "";
$mysql_database = "dokimh";

mysql_connect&#40;$mysql_host,$mysql_username,$mysql_password&#41; or
die&#40;"Error connecting to Database! Please Try again.
" . mysql_error&#40;&#41;&#41;;
mysql_select_db&#40;$mysql_database&#41; or die&#40;"Cannot select database! Please Try again.
" . mysql_error&#40;&#41;&#41;;
?>

Η βάση...βασικά ο πίνακας της βάσης είναι ο εξής :

Κώδικας: Επιλογή όλων

CREATE TABLE `gallery` &#40;
  `id` tinyint&#40;11&#41; NOT NULL auto_increment,
  `image_name` text NOT NULL,
  `image_desc` text NOT NULL,
  `image_item` text NOT NULL,
  PRIMARY KEY  &#40;`id`&#41;
&#41;

Ελπίζω να σου έδωσα αυτά που χρειαζόσουν!!

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Τί είναι...??Γνωρίζετε??

Δημοσίευση από dimsis » 08 Δεκ 2009 18:00

here you go:

Κώδικας: Επιλογή όλων

<?php
require "usersdb.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Rotator w/ Teaser - CSS &amp; jQuery Tutorial</title>
<style type="text/css">
body &#123;
	background&#58; #1d1d1d;
	margin&#58; 0;
	padding&#58; 0;
	font&#58; 10px normal Arial, Helvetica, sans-serif;
	background-color&#58; #FFFFFF;
&#125;
* &#123;
	margin&#58; 0;
	padding&#58; 0;
	outline&#58; none;
&#125;
img &#123;
	border&#58; none;
&#125;
h1 &#123;
	font&#58; 3em normal Georgia, "Times New Roman", Times, serif;
	color&#58; #fff;
	text-align&#58; center;
	background&#58; url&#40;h1_bg.gif&#41; no-repeat;
	text-indent&#58; -99999px;
	margin&#58; 100px 0 10px;
&#125;
.container &#123;
	overflow&#58; hidden;
	width&#58; 900px;
	margin&#58; 0 auto;
&#125;
#main &#123;
	padding&#58; 10px;
	background&#58; #f0f0f0;
	border&#58; 1px solid #ccc;
&#125;
a &#123;
	color&#58; #fff;
&#125;
/*--Main Image Preview--*/
.main_image &#123;
	width&#58; 598px;
	height&#58; 456px;
	float&#58; left;
	background&#58; #333;
	position&#58; relative;
	overflow&#58; hidden;
	color&#58; #fff;
&#125;
.main_image h2 &#123;
	font-size&#58; 2em;
	font-weight&#58; normal;
	margin&#58; 0 0 5px;
	padding&#58; 10px;
&#125;
.main_image p &#123;
	font-size&#58; 1.2em;
	padding&#58; 10px;
	margin&#58; 0;
	line-height&#58; 1.6em;
&#125;
.block small &#123;
	padding&#58; 0 0 0 20px;
	background&#58; url&#40;icon_calendar.gif&#41; no-repeat 0 center;
	font-size&#58; 1em;
&#125;
.main_image .block small &#123;
	margin-left&#58; 10px;
&#125;
.main_image .desc &#123;
	position&#58; absolute;
	bottom&#58; 0;
	left&#58; 0;
	width&#58; 100%;
	display&#58; none;
&#125;
.main_image .block &#123;
	width&#58; 100%;
	background&#58; #111;
	border-top&#58; 1px solid #000;
&#125;
.main_image a.collapse &#123;
	background&#58; url&#40;btn_collapse.gif&#41; no-repeat left top;
	height&#58; 27px;
	width&#58; 93px;
	text-indent&#58; -99999px;
	position&#58; absolute;
	top&#58; -27px;
	right&#58; 20px;
&#125;
.main_image a.show &#123;
	background-position&#58; left bottom;
&#125;
.image_thumb &#123;
	float&#58; left;
	width&#58; 299px;
	background&#58; #f0f0f0;
	border-right&#58; 1px solid #fff;
	border-top&#58; 1px solid #ccc;
&#125;
.image_thumb img &#123;
	border&#58; 1px solid #ccc;
	padding&#58; 5px;
	background&#58; #fff;
	float&#58; left;
&#125;
.image_thumb ul &#123;
	margin&#58; 0;
	padding&#58; 0;
	list-style&#58; none;
&#125;
.image_thumb ul li &#123;
	margin&#58; 0;
	padding&#58; 12px 10px;
	background&#58; #f0f0f0 url&#40;nav_a.gif&#41; repeat-x;
	width&#58; 279px;
	float&#58; left;
	border-bottom&#58; 1px solid #ccc;
	border-top&#58; 1px solid #fff;
	border-right&#58; 1px solid #ccc;
&#125;
.image_thumb ul li.hover &#123;
	background&#58; #ddd;
	cursor&#58; pointer;
&#125;
.image_thumb ul li.active &#123;
	background&#58; #fff;
	cursor&#58; default;
&#125;
html .image_thumb ul li h2 &#123;
	font-size&#58; 1.5em;
	margin&#58; 5px 0;
	padding&#58; 0;
&#125;
.image_thumb ul li .block &#123;
	float&#58; left;
	margin-left&#58; 10px;
	padding&#58; 0;
	width&#58; 170px;
&#125;
.image_thumb ul li p &#123;
	display&#58; none;
&#125;
</style>
<!--Call jQuery-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;   

   //Show Banner
   $&#40;".main_image .desc"&#41;.show&#40;&#41;; //Show Banner
   $&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0.85 &#125;, 1 &#41;; //Set Opacity

   //Click and Hover events for thumbnail list
   $&#40;".image_thumb ul li&#58;first"&#41;.addClass&#40;'active'&#41;;
   $&#40;".image_thumb ul li"&#41;.click&#40;function&#40;&#41;&#123;
      //Set Variables
      var imgAlt = $&#40;this&#41;.find&#40;'img'&#41;.attr&#40;"alt"&#41;; //Get Alt Tag of Image
      var imgTitle = $&#40;this&#41;.find&#40;'a'&#41;.attr&#40;"href"&#41;; //Get Main Image URL
      var imgDesc = $&#40;this&#41;.find&#40;'.block'&#41;.html&#40;&#41;;    //Get HTML of block
      var imgDescHeight = $&#40;".main_image"&#41;.find&#40;'.block'&#41;.height&#40;&#41;;   //Calculate height of block   
      
      if &#40;$&#40;this&#41;.is&#40;".active"&#41;&#41; &#123;  //If it's already active, then...
         return false; // Don't click through
      &#125; else &#123;
         //Animate the Teaser            
         $&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0, marginBottom&#58; -imgDescHeight &#125;, 250 , function&#40;&#41; &#123;
            $&#40;".main_image .block"&#41;.html&#40;imgDesc&#41;.animate&#40;&#123; opacity&#58; 0.85,   marginBottom&#58; "0" &#125;, 250 &#41;;
            $&#40;".main_image img"&#41;.attr&#40;&#123; src&#58; imgTitle , alt&#58; imgAlt&#125;&#41;;
         &#125;&#41;;
      &#125;
      
      $&#40;".image_thumb ul li"&#41;.removeClass&#40;'active'&#41;; //Remove class of 'active' on all lists
      $&#40;this&#41;.addClass&#40;'active'&#41;;  //add class of 'active' on this list only
      return false;
      
   &#125;&#41; .hover&#40;function&#40;&#41;&#123;
      $&#40;this&#41;.addClass&#40;'hover'&#41;;
      &#125;, function&#40;&#41; &#123;
      $&#40;this&#41;.removeClass&#40;'hover'&#41;;
   &#125;&#41;;
         
   //Toggle Teaser
   $&#40;"a.collapse"&#41;.click&#40;function&#40;&#41;&#123;
      $&#40;".main_image .block"&#41;.slideToggle&#40;&#41;;
      $&#40;"a.collapse"&#41;.toggleClass&#40;"show"&#41;;
   &#125;&#41;;
   
&#125;&#41;;//Close Function
</script>
</head>
<body>
<?php
	$result = mysql_query&#40;"SELECT * FROM gallery ORDER BY id limit 4"&#41;;
	?>
<div class="container">
  <h1>Image Gallery w/ Teaser - CSS &amp; jQuery Tutorial<small>by Soh Tanaka</small></h1>
</div>
<div id="main" class="container">
  <div class="main_image">
    <?php
		$row = mysql_fetch_array&#40;$result&#41;;
		echo "
		<img src=".$row&#91;'image_name'&#93;." alt=".$row&#91;'image_name'&#93;." />
		<div class=\"desc\">
			<a href=\"#\" class=\"collapse\">Close Me!</a>
			<div class=\"block\">
				<h2>".$row&#91;'image_name'&#93;."</h2>
				<small>Date</small>
				<p>".$row&#91;'image_desc'&#93;."<p>
			</div>
		</div>
		";
	?>
  </div>
  <div class="image_thumb">
    <ul>
      <?php
   $row=mysql_data_seek&#40;$result, 0&#41;;
	while&#40;$row = mysql_fetch_array&#40;$result&#41;&#41;
	echo "
		<li>
			<a href=".$row&#91;'image_name'&#93;."><img src=".$row&#91;'image_item'&#93;." alt=".$row&#91;'image_name'&#93;." /></a>
			<div class=\"block\">
			<h2>".$row&#91;'image_name'&#93;."</h2>
			<small>04/10/09</small>
				<p>".$row&#91;'image_desc'&#93;."<p>
			</div>
		</li>
		";
	?>
    </ul>
  </div>
</div>
</body>
</html>

demo: http://www.woot.gr/pg/

Αλλά θέλεις και κανένα πεδίο για την ημερομηνία γιατί τώρα την έβαλα καρφωτά.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 09 Δεκ 2009 00:44

Αρχικά να σε ευχαριστήσω για το χρόνο που διαθέτεις για να με βοηθήσεις!!

Εν συνεχεία..ο κώδικας που μου έδωσες δεν μου δουλεύει..
Τον άλλαξα λίγο και δουλεύει όπως πριν, δηλαδή εμφανίζονται οι μικρές φωτογραφίες και δεν εμφανίζονται οι μεγάλες..

Για του λόγου το αληθές...

Κώδικας: Επιλογή όλων

<?php
require "usersdb.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Rotator w/ Teaser - CSS &amp; jQuery Tutorial</title>
<style type="text/css">
body &#123;
   background&#58; #1d1d1d;
   margin&#58; 0;
   padding&#58; 0;
   font&#58; 10px normal Arial, Helvetica, sans-serif;
   background-color&#58; #FFFFFF;
&#125;
* &#123;
   margin&#58; 0;
   padding&#58; 0;
   outline&#58; none;
&#125;
img &#123;
   border&#58; none;
&#125;
h1 &#123;
   font&#58; 3em normal Georgia, "Times New Roman", Times, serif;
   color&#58; #fff;
   text-align&#58; center;
   background&#58; url&#40;h1_bg.gif&#41; no-repeat;
   text-indent&#58; -99999px;
   margin&#58; 100px 0 10px;
&#125;
.container &#123;
   overflow&#58; hidden;
   width&#58; 900px;
   margin&#58; 0 auto;
&#125;
#main &#123;
   padding&#58; 10px;
   background&#58; #f0f0f0;
   border&#58; 1px solid #ccc;
&#125;
a &#123;
   color&#58; #fff;
&#125;
/*--Main Image Preview--*/
.main_image &#123;
   width&#58; 598px;
   height&#58; 456px;
   float&#58; left;
   background&#58; #333;
   position&#58; relative;
   overflow&#58; hidden;
   color&#58; #fff;
&#125;
.main_image h2 &#123;
   font-size&#58; 2em;
   font-weight&#58; normal;
   margin&#58; 0 0 5px;
   padding&#58; 10px;
&#125;
.main_image p &#123;
   font-size&#58; 1.2em;
   padding&#58; 10px;
   margin&#58; 0;
   line-height&#58; 1.6em;
&#125;
.block small &#123;
   padding&#58; 0 0 0 20px;
   background&#58; url&#40;icon_calendar.gif&#41; no-repeat 0 center;
   font-size&#58; 1em;
&#125;
.main_image .block small &#123;
   margin-left&#58; 10px;
&#125;
.main_image .desc &#123;
   position&#58; absolute;
   bottom&#58; 0;
   left&#58; 0;
   width&#58; 100%;
   display&#58; none;
&#125;
.main_image .block &#123;
   width&#58; 100%;
   background&#58; #111;
   border-top&#58; 1px solid #000;
&#125;
.main_image a.collapse &#123;
   background&#58; url&#40;btn_collapse.gif&#41; no-repeat left top;
   height&#58; 27px;
   width&#58; 93px;
   text-indent&#58; -99999px;
   position&#58; absolute;
   top&#58; -27px;
   right&#58; 20px;
&#125;
.main_image a.show &#123;
   background-position&#58; left bottom;
&#125;
.image_thumb &#123;
   float&#58; left;
   width&#58; 299px;
   background&#58; #f0f0f0;
   border-right&#58; 1px solid #fff;
   border-top&#58; 1px solid #ccc;
&#125;
.image_thumb img &#123;
   border&#58; 1px solid #ccc;
   padding&#58; 5px;
   background&#58; #fff;
   float&#58; left;
&#125;
.image_thumb ul &#123;
   margin&#58; 0;
   padding&#58; 0;
   list-style&#58; none;
&#125;
.image_thumb ul li &#123;
   margin&#58; 0;
   padding&#58; 12px 10px;
   background&#58; #f0f0f0 url&#40;nav_a.gif&#41; repeat-x;
   width&#58; 279px;
   float&#58; left;
   border-bottom&#58; 1px solid #ccc;
   border-top&#58; 1px solid #fff;
   border-right&#58; 1px solid #ccc;
&#125;
.image_thumb ul li.hover &#123;
   background&#58; #ddd;
   cursor&#58; pointer;
&#125;
.image_thumb ul li.active &#123;
   background&#58; #fff;
   cursor&#58; default;
&#125;
html .image_thumb ul li h2 &#123;
   font-size&#58; 1.5em;
   margin&#58; 5px 0;
   padding&#58; 0;
&#125;
.image_thumb ul li .block &#123;
   float&#58; left;
   margin-left&#58; 10px;
   padding&#58; 0;
   width&#58; 170px;
&#125;
.image_thumb ul li p &#123;
   display&#58; none;
&#125;
</style>
<!--Call jQuery-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;   

   //Show Banner
   $&#40;".main_image .desc"&#41;.show&#40;&#41;; //Show Banner
   $&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0.85 &#125;, 1 &#41;; //Set Opacity

   //Click and Hover events for thumbnail list
   $&#40;".image_thumb ul li&#58;first"&#41;.addClass&#40;'active'&#41;;
   $&#40;".image_thumb ul li"&#41;.click&#40;function&#40;&#41;&#123;
      //Set Variables
      var imgAlt = $&#40;this&#41;.find&#40;'img'&#41;.attr&#40;"alt"&#41;; //Get Alt Tag of Image
      var imgTitle = $&#40;this&#41;.find&#40;'a'&#41;.attr&#40;"href"&#41;; //Get Main Image URL
      var imgDesc = $&#40;this&#41;.find&#40;'.block'&#41;.html&#40;&#41;;    //Get HTML of block
      var imgDescHeight = $&#40;".main_image"&#41;.find&#40;'.block'&#41;.height&#40;&#41;;   //Calculate height of block   
     
      if &#40;$&#40;this&#41;.is&#40;".active"&#41;&#41; &#123;  //If it's already active, then...
         return false; // Don't click through
      &#125; else &#123;
         //Animate the Teaser           
         $&#40;".main_image .block"&#41;.animate&#40;&#123; opacity&#58; 0, marginBottom&#58; -imgDescHeight &#125;, 250 , function&#40;&#41; &#123;
            $&#40;".main_image .block"&#41;.html&#40;imgDesc&#41;.animate&#40;&#123; opacity&#58; 0.85,   marginBottom&#58; "0" &#125;, 250 &#41;;
            $&#40;".main_image img"&#41;.attr&#40;&#123; src&#58; imgTitle , alt&#58; imgAlt&#125;&#41;;
         &#125;&#41;;
      &#125;
     
      $&#40;".image_thumb ul li"&#41;.removeClass&#40;'active'&#41;; //Remove class of 'active' on all lists
      $&#40;this&#41;.addClass&#40;'active'&#41;;  //add class of 'active' on this list only
      return false;
     
   &#125;&#41; .hover&#40;function&#40;&#41;&#123;
      $&#40;this&#41;.addClass&#40;'hover'&#41;;
      &#125;, function&#40;&#41; &#123;
      $&#40;this&#41;.removeClass&#40;'hover'&#41;;
   &#125;&#41;;
         
   //Toggle Teaser
   $&#40;"a.collapse"&#41;.click&#40;function&#40;&#41;&#123;
      $&#40;".main_image .block"&#41;.slideToggle&#40;&#41;;
      $&#40;"a.collapse"&#41;.toggleClass&#40;"show"&#41;;
   &#125;&#41;;
   
&#125;&#41;;//Close Function
</script>
</head>
<body>
<?php
   $result = mysql_query&#40;"SELECT * FROM gallery ORDER BY id desc limit 4"&#41;;
   ?>
<div class="container">
  <h1>Image Gallery w/ Teaser - CSS &amp; jQuery Tutorial<small>by Soh Tanaka</small></h1>
</div>
<div id="main" class="container">
  <div class="main_image">
    <?php
      $row = mysql_fetch_array&#40;$result&#41;;
      echo "
      <img src=".$row&#91;'image_name'&#93;." alt=".$row&#91;'image_name'&#93;." />
      <div class=\"desc\">
         <a href=\"#\" class=\"collapse\">Close Me!</a>
         <div class=\"block\">
            <h2>".$row&#91;'image_name'&#93;."</h2>
            <small>Date</small>
            <p>".$row&#91;'image_desc'&#93;."<p>
         </div>
      </div>
      ";
   ?>
  </div>
  <div class="image_thumb">
    <ul>
      <?php
   $row=mysql_data_seek&#40;$result, 0&#41;;
   while&#40;$row = mysql_fetch_array&#40;$result&#41;&#41;
   echo "
      <li>
         <a href=".$row&#91;'image_name'&#93;."><img src=\"thumb.php?file=images/".$row&#91;'image_item'&#93;."&sizex=100&sizey=25\" class=\"full\" /></a>
         <div class=\"block\">
         <h2>".$row&#91;'image_name'&#93;."</h2>
         <small>04/10/09</small>
            <p>".$row&#91;'image_desc'&#93;."<p>
         </div>
      </li>
      ";
   ?>
    </ul>
  </div>
</div>
</body>
</html> 

Τι κάνω λάθος που δεν το κάνεις εσύ??

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Τί είναι...??Γνωρίζετε??

Δημοσίευση από Basilakis » 09 Δεκ 2009 09:34

Καλησπέρα,

Απο τι στιγμή που υπάρχει demo και βλέπουμε τον κώδικα να παίζει (και φαντάζομαι είναι copy paste μέσα απο το αρχείο) θα ήταν καλό να τον ζορίσεις λίγο για να δείς τι παίζει :)

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Τί είναι...??Γνωρίζετε??

Δημοσίευση από dimsis » 09 Δεκ 2009 14:45

Εμένα μου παίζει και ο δικός σου κώδικας με τη μόνη διαφορά ότι δεν μου δείχνει τις μικρογραφίες δεξιά στα tabs, το οποίο λύνετε αν βάλεις

Κώδικας: Επιλογή όλων

<img src=".$row&#91;'image_item'&#93;." alt=".$row&#91;'image_name'&#93;." />
αντί του δικού σου

Κώδικας: Επιλογή όλων

<img src=\"thumb.php?file=images/".$row&#91;'image_item'&#93;."&sizex=100&sizey=25\" class=\"full\" />
Δεν ξέρω πως τα τραβάς τα thumbs και γιατί χρησιμοποιείς την thumb.php . Εγώ χρησιμοποίησα το πεδίο image_item που είχες για να βάζω τα ονόματα των thumbs.

τρέξε αυτό στην βάση σου να έχεις τα data όπως τα έχω και εγώ, ίσως από εκεί κάτι στραβώνει:

Κώδικας: Επιλογή όλων

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http&#58;//www.phpmyadmin.net
--
-- Σύστημα&#58; localhost
-- Χρόνος δημιουργίας&#58; 09 Δεκ 2009, στις 01&#58;33 PM
-- Έκδοση Διακομιστή&#58; 5.1.37
-- Έκδοση PHP&#58; 5.3.0

SET FOREIGN_KEY_CHECKS=0;

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Βάση&#58; `dokimh`
--

-- --------------------------------------------------------

--
-- Δομή Πίνακα για τον Πίνακα `gallery`
--

DROP TABLE IF EXISTS `gallery`;
CREATE TABLE `gallery` &#40;
  `id` tinyint&#40;11&#41; NOT NULL AUTO_INCREMENT,
  `image_name` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `image_desc` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `image_item` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY &#40;`id`&#41;
&#41; ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- 'Αδειασμα δεδομένων του πίνακα `gallery`
--

INSERT INTO `gallery` &#40;`id`, `image_name`, `image_desc`, `image_item`&#41; VALUES
&#40;1, 'banner1.jpg', 'Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.\r\nArtwork By Glenn Jones', 'banner1_thumb.jpg'&#41;,
&#40;2, 'banner2.jpg', 'Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.\r\n\r\nAutem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.\r\nArtwork By Glenn Jones', 'banner2_thumb.jpg'&#41;,
&#40;3, 'banner3.jpg', 'Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.\r\nArtwork By Glenn Jones', 'banner3_thumb.jpg'&#41;;

SET FOREIGN_KEY_CHECKS=1;

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 09 Δεκ 2009 17:15

Κοίτα να δεις...

Κάνω ό,τι ακριβώς λες. Άλλαξα πάλι τα δεδομένα στον πίνακα,αλλά και πάλι τα ίδια. Άλλαξα αυτά που μου είπες στον κώδικα και τώρα δεν βλέπει ούτε τις μικρές φωτογραφίες.

Χρησιμοποιείς και τίποτε άλλο?

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Τί είναι...??Γνωρίζετε??

Δημοσίευση από argate7 » 09 Δεκ 2009 17:49

ΜΜΜ...Απ'ότι κατάλαβα ανεβάζεις τις φωτογραφίες στη βάση,ενώ εγώ ανέβαζα το όνομα της φωτογραφίας και πήγαινα μέσω κώδικα και άνοιγα τον φάκελο στον οποίο υπάρχαν οι φωτογραφίες. Σωστά?

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες