Obserwujący 0
ghost14

zmiana tla jquery ?

1 post w tym temacie

[problem]

 

tu mi coś nie działa, nie wiem czemu powiększenie dużego obrazka nie działa?

 
<html>
 
<head>
 
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<style>
img {
    margin: 5px;
    content: url('');
}
 
#thumbnails img {
    width: 50px;
    height: 50px;
}
 
#large img {
    width: 1000px;
    height: 1200px;
}
 
img[src^="0"] {
    background: url(tlo1.png) no-repeat; width:1000px; height:1200px;
}
 
img[src^="1"] {
     background: url(tlo2.png) no-repeat; width:1000px; height:1200px;
}
 
img[src^="2"] {
     background: url(tlo3.png) no-repeat; width:1000px; height:1200px;
}
</style>
<script type="text/javascript">
  $(function() {
    var photos = [
     { thumbnail: '0-tlo1.png', large: '0-tlo1.png' },
     { thumbnail: '1-tlo2.png', large: '1-tlo2.png' },
     { thumbnail: '2-tlo3.png', large: '2-tlo3.png' }
    ];
    
    var thumbnails = $('#thumbnails'),
     large = $('#large');    
    
    // add thumbnails
    var imgs = [];
    $.each(photos, function(index, photo) {
     var thumbnail = $('<img>')
         .prop('src', photo.thumbnail)
            .prop('alt', index)
         .data(photo);
     imgs.push(thumbnail);
    });
    thumbnails.append(imgs);
    
    // listen for thumbnail clicks
    thumbnails.on('click', 'img', function() {
     $('img', large).attr('src', $(this).data().large);
    });
    
    // add large photo
    var img = $('<img>')
        .prop('src', photos[0].large)
        .prop('alt', 'large');
    large.append(img);
}); 
</script>
</head>
<body>
<div id="gallery">
    <div id="large"></div>
    <div id="thumbnails"></div>
</div></body>
</html>
 
 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach
Gość
Ten temat jest zamknięty i nie można dodawać odpowiedzi.
Obserwujący 0