Autorius Tema: jQuery thumbnail gallery  (Skaityta 3518 kartus)

Neprisijungęs darkInsane

  • Naujokas
  • *
  • Įrašai: 11
  • Karma: +0/-0
    • Žiūrėti profilį
jQuery thumbnail gallery
« Įrašytas: 2015-02-01 00:49:29 am »
tai va noriu kad pagelbetumet man su paveiksleliu galerija ji yra veikianti bet va truksta man sutvarkyti su active klase viena problemele.. kiekvienas thumbnailas turi savo pritamsinima palei default. galit paziureti http://websolution.esy.es/interior/  man reikia kad paspaudus patamsejimas nusiima ir uzsideda active klase, ir po to spaudžiant sekanti kuri nors thumbnaila preitas turi vel sugrizti su patamsinimu, o man deja jis toks ir palieka.. (prisegu kaip atrodo)

Mano rasytas kodas:

Html:

<div id="main-image">
      <img src="images/gallery-img6.jpg" alt="Placeholder" class="custom">
       </div>
<ul class="thumbnails">
<li><a href="images/gallery-img1.jpg"> <div class="active"></div><img src="images/thumb-1.jpg" alt="Thumbnails"></a></li>
 <li><a href="images/gallery-img2.jpg"><div class="active"></div><img src="images/thumb-2.jpg" alt="Thumbnails"></a></li>
</ul>

Css:

#gallery {padding: 20px 0px 5px;}

#gallery ul {
    width: 320px;
    float: left;

}
#gallery li {
    display: block;
    margin-right: 12px;
    float: left;
    margin: 0px 10px 18px 8px;


}
#gallery li:hover .active { display: none;}
.inactive  {
    background: none
   
}

.active  {
    background: url(../images/thumb.png) no-repeat;
    display: block;
    position: absolute;
    width: 140px;
    height: 120px;
}


#gallery #main-image {
    padding: 0px 10px 0px 20px; float: left;

}

Js:

(function($) {

    $.fn.extend({
        verticalGallery: function(options) {

            var defaults = {
                mainImage: ".placeholder"
            };

            options = $.extend(defaults, options);
jQuery('ul.thumbnails').find('div.active').show()
            return this.each(function() {

                var thumbnail = $(this).find("a"),
                        mainImage = $(this).siblings().find(options.mainImage);

                thumbnail.click(function(e) {

                    e.preventDefault();

                    var galleryImage = $(this).attr("href");
                    mainImage.attr("src", galleryImage);

                    $(this).find('.active').hide();

                });

            });

        }

    });

})(jQuery);

Neprisijungęs Lukas

  • Administratorius
  • Herojus
  • ******
  • Įrašai: 7431
  • Karma: +232/-15
    • Žiūrėti profilį
Ats: jQuery thumbnail gallery
« Atsakymas #1 Įrašytas: 2015-02-01 06:59:46 am »
pabandyk pries

$(this).find('.active').hide();

ideti:

$('#gallery .active:hidden').show();

kad visus vel parodyti, kas buvo neberodoma ;)
Jūsų draugas, kolega ir puslapio administratorius,

Lukas.

Gerda Photography
Serveriai.lt 50% nuolaida!
Free Hosting
Free Templates

Neprisijungęs darkInsane

  • Naujokas
  • *
  • Įrašai: 11
  • Karma: +0/-0
    • Žiūrėti profilį
Ats: jQuery thumbnail gallery
« Atsakymas #2 Įrašytas: 2015-02-01 11:26:09 am »
Dekoju labai :)  tik dar toks klausimukas kaip padaryti kad rodytu active palei defaulta ? nu ta prasme kai uzkrauni dabar rodo paskutiniaja palei sarasa fotke ir kad jos active thumbail butu
« Paskutinį kartą keitė: 2015-02-01 12:02:02 pm sukūrė darkInsane »

Neprisijungęs Lukas

  • Administratorius
  • Herojus
  • ******
  • Įrašai: 7431
  • Karma: +232/-15
    • Žiūrėti profilį
Ats: jQuery thumbnail gallery
« Atsakymas #3 Įrašytas: 2015-02-02 06:03:27 am »
Dekoju labai :)  tik dar toks klausimukas kaip padaryti kad rodytu active palei defaulta ? nu ta prasme kai uzkrauni dabar rodo paskutiniaja palei sarasa fotke ir kad jos active thumbail butu

gali tiesiog su serverside ta padaryti (php if'a uzdet) kad jei pirmas, tai rodo arba gali ir su js ta pati daryti, paselektinti tiesiog tau reikia pati pirma elementa, tai

$('#gallery .active:first').hide();

Jūsų draugas, kolega ir puslapio administratorius,

Lukas.

Gerda Photography
Serveriai.lt 50% nuolaida!
Free Hosting
Free Templates

Manualai.lt Forumas

Ats: jQuery thumbnail gallery
« Atsakymas #3 Įrašytas: 2015-02-02 06:03:27 am »