Πρόβλημα με Image gallery

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Πρόβλημα με Image gallery

Δημοσίευση από neogeo21 » 18 Οκτ 2012 03:43

Έχω φτιάξει αυτην την σελίδα σε html και έχω βάλει μεσα ένα carousel gallery που το βρήκα free απλά μου δημιουργεί προβλημα στην σελίδα όπως θα δείτε μου έχει χαλάσει το από κάτο div και το footer.
www.playkid.gr/testpage.html

Kανονικά πρέπει να είναι κάπως έτσι
http://www.playkid.gr/home.html

Αυτός είναι και ο κώδικας τις σελίδας μου

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

<!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=utf-8" />
<title>Παίζω και Μαθαίνω, εκπαιδευτικά παιχνίδια για παιδιά δημοτικού και προσχολικής ηλικίας - playkid.gr</title>
<link href="home.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="examples/css/reset.css" />				
<link type="text/css" rel="stylesheet" href="examples/css/style.css" />			
<link type="text/css" rel="stylesheet" href="widget/css/rcarousel.css" />	
<style type="text/css">
			#container &#123;
				width&#58; 900px;
				position&#58; relative;
				margin&#58; 0 auto;
			&#125;
			
			#carousel &#123;
				width&#58; 780px;
				margin&#58; 0 auto;
			&#125;
			
			#ui-carousel-next, #ui-carousel-prev &#123;
	width&#58; 60px;
	height&#58; 240px;
	background&#58; url&#40;images/arrow-left.png&#41; #fff center center no-repeat;
	display&#58; block;
	position&#58; absolute;
	top&#58; 0;
	z-index&#58; 100;
	background-image&#58; url&#40;examples/images/arrow-left.png&#41;;
			&#125;

			#ui-carousel-next &#123;
	right&#58; 0;
	background-image&#58; url&#40;examples/images/arrow-right.png&#41;;
			&#125;

			#ui-carousel-prev &#123;
				left&#58; 0;
			&#125;
			
			#ui-carousel-next > span, #ui-carousel-prev > span &#123;
				display&#58; none;
			&#125;
			
			.slide &#123;
				margin&#58; 0;
				position&#58; relative;
			&#125;
			
			.slide  h1 &#123;
				font&#58; 72px/1 Anton, sans-serif;
				color&#58; #ff5c43;
				margin&#58; 0;
				padding&#58; 0;
			&#125;
			
			.slide  p &#123;
				font&#58; 32px/1 Ubuntu, sans-serif;	
				color&#58; #4d4d4d;
				margin&#58; 0;
				padding&#58; 0;
			&#125;
			
			#slide01 > img &#123;
				position&#58; absolute;
				bottom&#58; 35px;
				left&#58; 30px;
			&#125;
			
			#slide01 > .text &#123;
				position&#58; absolute;
				left&#58; 290px;
				bottom&#58; 35px;
			&#125;
			
			#slide02 > img &#123;
				position&#58; absolute;
				bottom&#58; 35px;
				left&#58; 30px;
			&#125;
			
			#slide02 > .text &#123;
				position&#58; absolute;
				left&#58; 290px;
				bottom&#58; 65px;
			&#125;
			
			#slide03 > img &#123;
				position&#58; absolute;
				bottom&#58; 25px;
				left&#58; 30px;
			&#125;
			
			#slide03 > .text &#123;
				position&#58; absolute;
				left&#58; 270px;
				bottom&#58; 25px;
			&#125;
			
			#slide04 > img &#123;
				position&#58; absolute;
				bottom&#58; 50px;
				left&#58; 60px;
			&#125;
			
			#slide04 > .text &#123;
				position&#58; absolute;
				left&#58; 290px;
				bottom&#58; 25px;
			&#125;
			
			#slide05 > img &#123;
				position&#58; absolute;
				bottom&#58; 35px;
				left&#58; 60px;
			&#125;
			
			#slide05 > .text &#123;
				position&#58; absolute;
				left&#58; 240px;
				bottom&#58; 35px;
			&#125;
			
			#slide06 > img &#123;
				position&#58; absolute;
				bottom&#58; 10px;
				left&#58; 20px;
			&#125;
			
			#slide06 > .text &#123;
				position&#58; absolute;
				left&#58; 290px;
				bottom&#58; 35px;
			&#125;
			
			#pages &#123;
				width&#58; 150px;
				margin&#58; 0 auto;
			&#125;
			
			.bullet &#123;
				background&#58; url&#40;images/page-off.png&#41; center center no-repeat;
				display&#58; block;
				width&#58; 18px;
				height&#58; 18px;
				margin&#58; 0;
				margin-right&#58; 5px;
				float&#58; left;				
			&#125;
			
			
		</style>
</head>

<body>
<div id="header">
  <object id="FlashID" classid="clsid&#58;D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="240">
    <param name="movie" value="-header2.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="8.0.35.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--&#91;if !IE&#93;>-->
    <object type="application/x-shockwave-flash" data="-header2.swf" width="100%" height="240">
      <!--<!&#91;endif&#93;-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="8.0.35.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http&#58;//www.adobe.com/go/getflashplayer"><img src="http&#58;//www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--&#91;if !IE&#93;>-->
    </object>
    <!--<!&#91;endif&#93;-->
  </object>
</div>

<div id="content">
			
			<div id="container">
			  <div id="carousel">
					<div id="slide01" class="slide">
					  <img src="examples/images/html_slides/jqueryui.png" alt="jQuery UI logo" />
						<div class="text">
							<h1>continuous<br />carousel</h1>
							<p>driven by jQuery UI</p>
						</div>
					</div>
					
					<div id="slide02" class="slide">
					  <img src="examples/images/html_slides/anycontent.png" alt="any content" />
						<div class="text">
							<h1>any content</h1>
							<p>from images to any HTML element</p>
						</div>
					</div>
					
					<div id="slide03" class="slide">
					  <img src="examples/images/html_slides/horizontalvertical.png" alt="horizontal and vertical carousel" />
						<div class="text">
							<h1>horizontal<br />and vertical</h1>
							<p>carousels just one click away</p>
						</div>
					</div>
					
					<div id="slide04" class="slide">
					  <img src="examples/images/html_slides/multi.png" alt="multi carousels" />
						<div class="text">
							<h1>multi<br />carousels</h1>
							<p>on a page</p>
						</div>
					</div>
					
					<div id="slide05" class="slide">
					  <img src="examples/images/html_slides/customization.png" alt="customization" />
						<div class="text">
							<h1>highly<br />customizable</h1>
							<p>style it whatever you like</p>
						</div>
					</div>
					
					<div id="slide06" class="slide">
					  <img src="examples/images/html_slides/browsers.png" alt="multi browser support" />
						<div class="text">
							<h1>multi browser<br />support</h1>
							<p>supports even old browsers</p>
						</div>
					</div>					
				</div>
				<a href="#" name="ui-carousel-next" id="ui-carousel-next"><span>next</span></a>
				<a href="#" name="ui-carousel-prev" id="ui-carousel-prev"><span>prev</span></a>
				<div id="pages"></div>
                </div>
		</div>

<div id="funny">
<div class="funny_inside">
	<img src="work4.jpg" alt="Work 1" width="136" height="75" border="0" usemap="#Map" class="image" />
    <map name="Map" id="Map">
      <area shape="rect" coords="2,1,134,73" href="#" />
    </map>
       <p><span class="emphasis"><a href="#">Τα αρκουδάκια</a></span><br />
        <a href="#">Παιχνίδι ζωγραφικής</a></p>
</div>
</div>
<div id="content2">
<div class="content2_inside">
	<img src="work1.jpg" alt="Work 1" width="136" height="75" border="0" usemap="#Map2" class="image" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="2,1,133,74" href="#" />
    </map>
       <p><span class="emphasis"><a href="#">Αγόρασε λεμονάδες</a></span><br />
        <a href="#">Παιχνίδι πολλ/σιασμού</a></p>
</div>
<div class="content2_inside">
	<img src="work2.jpg" alt="Work 2" width="136" height="75" border="0" usemap="#Map3" class="image" />
    <map name="Map3" id="Map3">
      <area shape="rect" coords="2,2,133,73" href="#" />
    </map>
       <p><span class="emphasis"><a href="#">Γέμισε το δοχείο</a></span><br />
        <a href="#">Εκπαιδευτικό παιχνίδι</a></p>
</div>
<div class="content2_inside">
	<img src="work3.jpg" alt="Work 3" width="136" height="75" border="0" usemap="#Map4" class="image" />
    <map name="Map4" id="Map4">
      <area shape="rect" coords="3,2,133,73" href="#" />
    </map>
    <p><span class="emphasis"><a href="#">H αξία των ψηφίων</a></span><br />
      <a href="#">Παιχνίδι για 1 ή 2 παίκτες</a></p>
</div>
<div class="content2_inside">
<img src="work5.jpg" alt="Work 3" width="136" height="75" border="0" usemap="#Map5" class="image" />
<map name="Map5" id="Map5">
  <area shape="rect" coords="2,2,135,73" href="#" />
</map>  
<p><span class="emphasis"><a href="#">Το νησί</a></span><br />
    <a href="#">Παιχνίδι μνήμης</a></p>
</div>

</div>
</div>
<div id="footer">
<br />
Copyright &copy; Playkid.gr 2011. All Rights Reserved.

</div>
</div>
<script type="text/javascript" src="widget/lib/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="widget/lib/jquery.ui.core.js"></script>
		<script type="text/javascript" src="widget/lib/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.js"></script>
		<script type="text/javascript">
			jQuery&#40;function&#40;$&#41; &#123;
				function generatePages&#40;&#41; &#123;
					var _total, i, _link;
					
					_total = $&#40; "#carousel" &#41;.rcarousel&#40; "getTotalPages" &#41;;
					
					for &#40; i = 0; i < _total; i++ &#41; &#123;
						_link = $&#40; "<a href='#'></a>" &#41;;
						
						$&#40;_link&#41;
							.bind&#40;"click", &#123;page&#58; i&#125;,
								function&#40; event &#41; &#123;
									$&#40; "#carousel" &#41;.rcarousel&#40; "goToPage", event.data.page &#41;;
									event.preventDefault&#40;&#41;;
								&#125;
							&#41;
							.addClass&#40; "bullet off" &#41;
							.appendTo&#40; "#pages" &#41;;
					&#125;
					
					// mark first page as active
					$&#40; "a&#58;eq&#40;0&#41;", "#pages" &#41;
						.removeClass&#40; "off" &#41;
						.addClass&#40; "on" &#41;
						.css&#40; "background-image", "url&#40;images/page-on.png&#41;" &#41;;

				&#125;

				function pageLoaded&#40; event, data &#41; &#123;
					$&#40; "a.on", "#pages" &#41;
						.removeClass&#40; "on" &#41;
						.css&#40; "background-image", "url&#40;images/page-off.png&#41;" &#41;;

					$&#40; "a", "#pages" &#41;
						.eq&#40; data.page &#41;
						.addClass&#40; "on" &#41;
						.css&#40; "background-image", "url&#40;images/page-on.png&#41;" &#41;;
				&#125;
				
				$&#40;"#carousel"&#41;.rcarousel&#40;
					&#123;
						visible&#58; 1,
						step&#58; 1,
						speed&#58; 700,
						auto&#58; &#123;
							enabled&#58; true
						&#125;,
						width&#58; 780,
						height&#58; 240,
						start&#58; generatePages,
						pageLoaded&#58; pageLoaded
					&#125;
				&#41;;
				
				$&#40; "#ui-carousel-next" &#41;
					.add&#40; "#ui-carousel-prev" &#41;
					.add&#40; ".bullet" &#41;
					.hover&#40;
						function&#40;&#41; &#123;
							$&#40; this &#41;.css&#40; "opacity", 0.7 &#41;;
						&#125;,
						function&#40;&#41; &#123;
							$&#40; this &#41;.css&#40; "opacity", 1.0 &#41;;
						&#125;
					&#41;;
			&#125;&#41;;
		</script>
</body>
</html>
[/code]

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Πρόβλημα με Image gallery

Δημοσίευση από neogeo21 » 20 Οκτ 2012 17:52

τι έγινε καμια απάντηση...τοσο πολύ δύσκολο είναι αυτό το πράγμα τελικά που το εχετε
γράψει όλοι στα @@@@@ σας

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πρόβλημα με Image gallery

Δημοσίευση από dva_dev » 20 Οκτ 2012 18:10

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

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Πρόβλημα με Image gallery

Δημοσίευση από korgr » 20 Οκτ 2012 18:24

dva_dev έγραψε:Αν είναι δυνατόν να μην σου έχει απαντήσει κανένας ακόμα, κανονικά πρέπει να ζητήσεις τα λεφτά σου πίσω και με τόκο.
lol

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Πρόβλημα με Image gallery

Δημοσίευση από neogeo21 » 21 Οκτ 2012 02:10

Μάλιστα....3 πουλάκια κάθονταν και πλέκανε πουλόβερ...!!!
την βγάλαμε την άκρη στο πρόβλημα μας

neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Πρόβλημα με Image gallery

Δημοσίευση από neogeo21 » 21 Οκτ 2012 02:23

και όσο για σένα φίλε που πουλάς ειρωνία αν εγώ πρέπει να ζητήσω τα λευτά μου πίσω που δεν μου απάντησε κανένας θα ήθελα να σου πω πως δεν είναι σωστό να κάνεις κηδεία με ξένα κόλυβα...γιατί το nivoslider και τα jquery script από το tripwiremagazine.com ξέρω και εγώ να τα κάνω copy paste και να το παιζω τσαμπα μάγκας...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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