Προς το περιεχόμενο

Multiple Galleries in one page

Επισκέπτης

Από τον Επισκέπτης
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

Επισκέπτης

Επισκέπτης

Δημοσ.
Δημοσ.

Καλησπέρα,

 

Προσπαθώ να εισάγω πολλαπλές galleries σε μία σελίδα αλλά δυστυχώς μου παρουσιάζει κάποιο πρόβλημα και μου δουλεύει μόνο η μία. Η σελίδα είναι σε html. Προφανώς κάπως θα πρέπει να δηλώσω το πόσες galleries θέλω αλλά δεν ξέρω πως. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebSite</title>
<!-- Main Style Sheets - Change Theme -->
<link href="css/main.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
<!-- Js Files -->
<script src="library/js/jquery.min.js" type="text/javascript"></script>
<script src="library/js/custom.js" type="text/javascript"></script>
<!-- Nivo Sldier -->
<script type="text/javascript" src="library/slider/jquery.nivo.slider.pack.js"></script>
<link href="css/nivo-slider.css" type="text/css" rel="stylesheet">
</head>
<body>

<div id="top-menu2main">
<div id="top-menu2">
<div id="logo">
<a href="index.html" class="logoswitch"> <img title="Studio Makris" src="images/logo_scroll.png" alt="Studio Makris" /> </a>

</div>
        
<div id="navigation">
            <div id="navigation-main">
              <ul>
                <li class="last"><a href="contactus.php"><strong>ΕΠΙΚΟΙΝΩΝΙΑ</strong></a></li>
                <li><a href="services.html"><strong>ΥΠΗΡΕΣΙΕΣ</strong></a>
                </li>
                <li><a href="#"><strong>ΒΑΠΤΙΣΗ</strong></a>
                  <ul style="overflow:visible;">
                    <li><a href="portfolio-vaptisi.html">Φωτογραφίες Βάπτισης</a></li>
                    <li class="last"><a href="portfolio-vaptisi-video.html">Βίντεο Βάπτισης</a></li>
                  </ul>
                </li>
                <li><a href="#"><strong>ΓΑΜΟΣ</strong></a>
                  <ul style="overflow:visible;">
                    <li><a href="portfolio-gamos.html">Φωτογραφίες Γάμου</a></li>
                    <li class="last"><a href="portfolio-gamos-video.html">Βίντεο Γάμου</a></li>
                  </ul>
                </li>
                <li><a href="about-us.html"><strong>ΠΡΟΦΙΛ</strong></a></li>
                </li>
                <li class="first"><a href="index.html"><strong>ΑΡΧΙΚΗ</strong></a>
                </li>
              </ul>
            </div>
          </div>
</div>
</div>
          
<!-- Page Full Container -->
<div id="page">
  <!-- Page Middle Container -->
  <div class="headerfull">
    <div class="midarea inheaderbg">
      <!-- Header - Start Here -->
      <div class="header-inner">
        <div id="logo">
        <a href="index.html" class="logoswitch"> <img title="Studio Makris" src="images/logo.png" alt="Studio Makris" /> </a>
       
        </div>
        <div class="header-in-right">
          <!-- Navigation - Start Here -->
    <div id="navigation">
      <div id="navigation-main">
        <ul>
          <li class="last"><a href="contactus.php"><strong>ΕΠΙΚΟΙΝΩΝΙΑ</strong></a></li>
          <li><a href="services.html"><strong>ΥΠΗΡΕΣΙΕΣ</strong></a>
          </li>
          <li><a href="#"><strong>ΒΑΠΤΙΣΗ</strong></a>
            <ul style="overflow:visible;">
              <li><a href="portfolio-vaptisi.html">Φωτογραφίες Βάπτισης</a></li>
              <li class="last"><a href="portfolio-vaptisi-video.html">Βίντεο Βάπτισης</a></li>
            </ul>
          </li>
          <li><a href="#"><strong>ΓΑΜΟΣ</strong></a>
            <ul style="overflow:visible;">
              <li><a href="portfolio-gamos.html">Φωτογραφίες Γάμου</a></li>
              <li class="last"><a href="portfolio-gamos-video.html">Βίντεο Γάμου</a></li>
            </ul>
          </li>
          <li><a href="about-us.html"><strong>ΠΡΟΦΙΛ</strong></a></li>
          </li>
          <li class="first"><a href="index.html"><strong>ΑΡΧΙΚΗ</strong></a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Navigation - End Here -->
        </div>
      </div>
    </div>
  </div>
  <!-- Header - End Here -->
  <div class="cont_round_center">
    <!-- Content Area - Start Here -->
    <div class="content">
      <div class="midarea">
        <h2 class="intitle"> <span class="title">ΦΩΤΟΓΡΑΦΙΕΣ ΓΑΜΟΥ</span> <span class="title_text">Φωτογραφία γάμου με υψηλή αισθητική και ποιότητα.</span> </h2>
        <div class="clear"></div>
        <div class="middle-inner" id="content">
          <div class="clearboth">
            <div class="one_fourth">
              <h2>Gallery 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sem nibh.</p>
              <ul class="list_style_01">
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.<br />
                </li>
              </ul>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sem nibh.<br />
                <br />
                <span class="txtbggreen">Lolor sit amet Lorem ipsum dolor sit.</span>
              <ul class="list_style_01">
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
              </ul>
              </p>
            </div>
            <div class="three_fourth last" style="padding:20px 0 0 0;">
              <div class="theme-default">
                <div id="slider" class="nivoSlider gallery"> <img src="images/gallery-inner_01.jpg" alt="" width="726" height="476" rel="images/gallery-inner_01_thumb.jpg"/> <a href="#"><img src="images/gallery-inner_02.jpg" alt="" width="726" height="476" rel="images/gallery-inner_02_thumb.jpg" /></a> <img src="images/gallery-inner_03.jpg" alt="" width="726" height="476" rel="images/gallery-inner_03_thumb.jpg" /> <img src="images/gallery-inner_04.jpg" alt="" width="726" height="476" title="#htmlcaption" rel="images/gallery-inner_04_thumb.jpg" /> <img src="images/gallery-inner_01.jpg" alt="" width="726" height="476" rel="images/gallery-inner_01_thumb.jpg"/> <a href="#"><img src="images/gallery-inner_02.jpg" alt="" width="726" height="476" rel="images/gallery-inner_02_thumb.jpg" /></a> <img src="images/gallery-inner_03.jpg" alt="" width="726" height="476" rel="images/gallery-inner_03_thumb.jpg" /> <img src="images/gallery-inner_04.jpg" alt="" width="726" height="476" title="#htmlcaption" rel="images/gallery-inner_04_thumb.jpg" /> </div>
                <script type="text/javascript" src="library/slider/jquery.nivo.slider.pack.js"></script>
                <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
				
		$('#slider').nivoSlider({
			controlNavThumbs:true,
			controlNavThumbsFromRel:true
		});
        </script>
              </div>
            </div>
          </div>
        </div>
 
 
<!--Second gallery-->
    <div class="content">
      <div class="midarea">
        <div class="clear"></div>
          <div class="middle-inner" id="content">
          <div class="clearboth">
            <div class="one_fourth">
              <h2>Gallery 1</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sem nibh.</p>
              <ul class="list_style_01">
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.<br />
                </li>
              </ul>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sem nibh.<br />
                <br />
                <span class="txtbggreen">Lolor sit amet Lorem ipsum dolor sit.</span>
              <ul class="list_style_01">
                <li>Vestibulum tortor quam, feu.</li>
                <li>Vestibulum tortor quam, feu.</li>
              </ul>
              </p>
            </div>
            <div class="three_fourth last" style="padding:20px 0 0 0;">
              <div class="theme-default">
                <div id="slider" class="nivoSlider gallery"> <img src="images/gallery-inner_01.jpg" alt="" width="726" height="476" rel="images/gallery-inner_01_thumb.jpg"/> <a href="#"><img src="images/gallery-inner_02.jpg" alt="" width="726" height="476" rel="images/gallery-inner_02_thumb.jpg" /></a> <img src="images/gallery-inner_03.jpg" alt="" width="726" height="476" rel="images/gallery-inner_03_thumb.jpg" /> <img src="images/gallery-inner_04.jpg" alt="" width="726" height="476" title="#htmlcaption" rel="images/gallery-inner_04_thumb.jpg" /> <img src="images/gallery-inner_01.jpg" alt="" width="726" height="476" rel="images/gallery-inner_01_thumb.jpg"/> <a href="#"><img src="images/gallery-inner_02.jpg" alt="" width="726" height="476" rel="images/gallery-inner_02_thumb.jpg" /></a> <img src="images/gallery-inner_03.jpg" alt="" width="726" height="476" rel="images/gallery-inner_03_thumb.jpg" /> <img src="images/gallery-inner_04.jpg" alt="" width="726" height="476" title="#htmlcaption" rel="images/gallery-inner_04_thumb.jpg" /> </div>
                <script type="text/javascript" src="library/slider/jquery.nivo.slider.pack.js"></script>
                <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
				
		$('#slider').nivoSlider({
			controlNavThumbs:true,
			controlNavThumbsFromRel:true
		});
        </script>
              </div>
            </div>
          </div>
        </div>
 <!--End second gallery-->
 
 
        
        <div class="clear"></div>
        <div class="clear"></div>
      </div>      
    <!-- Content Area - End Here -->
  </div>
<!-- Footer - Start Here -->
<div id="footer">
  <div class="footerbg2"></div>
  <div class="footerbg3">
    <div class="midarea">
      <div class="footer-inner2">
          <div class="copyright-text">© 2014 WebSite. All rights reserved. Designed by ME. Version 14.02.</div>
        <div class="footer-clinks"> <a href="index.html"> Αρχική </a> | <a href="about-us.html"> Προφίλ </a> | <a href="services.html"> Υπηρεσίες </a> |  <a href="contactus.php"> Επικοινωνία </a></div>
      </div>
    </div>
  </div>
</div>
<!-- Footer - End Here -->
  <div class="clear"></div>
</div>
</body>
</html>

Να σημειώσω πως στα quotes "Second gallery" είναι το copy-paste από την default gallery. To template έχει σαν default μία και όχι δύο.

Xvipes Crazy Insomniac

Xvipes

Δημοσ.
Δημοσ.

Θα πρέπει να δώσεις διαφορετικό id στην δεύτερη gallery.

Π.χ στην 2η βάλε <div id="slider2" class="nivoSlider gallery">

και από κάτω δώσε

 $(window).load(function() {
            $('#slider2').nivoSlider();
        });
				
		$('#slider2').nivoSlider({
			controlNavThumbs:true,
			controlNavThumbsFromRel:true
		});

Επίσης καλό θα ήταν την js να την βάλεις μια φορά στο τέλος μαζεμένη π.χ

 $(window).load(function() {
            $('#slider, #slider2').nivoSlider();			
	    $('#slider, #slider2').nivoSlider({
		controlNavThumbs:true,
		controlNavThumbsFromRel:true
	    });
  });
Επισκέπτης

Επισκέπτης

Δημοσ.
Δημοσ.

Νέο πρόβλημα... Ενώ το έφτιαξα το θέμα με τις πολλαπλές galleries και τοπικά μου δουλεύουν κανονικά. Όταν το έκανα upload δεν μου δείχνει τις φωτογραφίες. Καμμία ιδέα?

nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Λογικά δεν είναι σωστό το path της εικόνας.Για δοκίμασε να κάνεις View page source στην σελίδα βρες μια εικόνα που χρησιμοποιείται σε κάποιο slider (το element για τις εικόνες είναι το <img>) και δες το attribute src. Τι μορφή έχει το path? Επίσης στον server που έχεις βάλει τις εικόνες?

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...