Jquery τυχαία επιλογή εικόνων

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

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

Απάντηση
Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Jquery τυχαία επιλογή εικόνων

Δημοσίευση από apsuh0s » 30 Ιούλ 2012 04:01

Καλημέρες. Παίδες τα φώτα σας..

Έχω 20 εικόνες 125px*125px η κάθε μία (banners). Ωστόσο επιθυμώ να εμφανίζονται 10 από αυτές με τυχαίο τρόπο και φυσικά να μην υπάρχει η μία εικόνα πάνω από μία φορά.

Έψαξα στο net και προσάρμοσα το παρακάτω που βρήκα:

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

$(document).ready(function() {
   load_banner();
});

function load_banner() {
    var banners_img = new Array();
    var banners_url = new Array();
    var banners_width = new Array();
    var banners_height = new Array();
	
    banners_img[0]= "..1.jpg";
    banners_url[0]= "#";
    banners_width[0]= "125";
    banners_height[0]= "125";
	
    banners_img[1]= "..2.jpg";
    banners_url[1]= "#";
    banners_width[1]= "125";
    banners_height[1]= "125";
	
    banners_img[2]= "..3.jpg";
    banners_url[2]= "#";
    banners_width[2]= "125";
    banners_height[2]= "125";

    banners_img[3]= "..4.jpg";
    banners_url[3]= "#";
    banners_width[3]= "125";
    banners_height[3]= "125";
	
    banners_img[4]= "..5.jpg";
    banners_url[4]= "#";
    banners_width[4]= "125";
    banners_height[4]= "125";

    banners_img[5]= "..6.jpg";
    banners_url[5]= "#";
    banners_width[5]= "125";
    banners_height[5]= "125";

    banners_img[6]= "..7.jpg";
    banners_url[6]= "#";
    banners_width[6]= "125";
    banners_height[6]= "125";

    banners_img[7]= "..8.jpg";
    banners_url[7]= "#";
    banners_width[7]= "125";
    banners_height[7]= "125";
	
	// ...μέχρι το array[19] και αντιστοίχως το 20.jpg

	
	randno1 = Math.floor ( Math.random() * banners_url.length );
	randno2 = Math.floor ( Math.random() * banners_url.length );
	randno3 = Math.floor ( Math.random() * banners_url.length );
	randno4 = Math.floor ( Math.random() * banners_url.length );
	
	// ...μέχρι το randno10
	
	var the_banner_1 = '<a href="' + banners_url&#91;randno1&#93; + '" target="_blank"><img src="' + banners_img&#91;randno1&#93; + '" width="' + banners_width&#91;randno1&#93; + '" height="' +  banners_height&#91;randno1&#93; + '" /></a>';
	var the_banner_2 = '<a href="' + banners_url&#91;randno2&#93; + '" target="_blank"><img src="' + banners_img&#91;randno2&#93; + '" width="' + banners_width&#91;randno2&#93; + '" height="' +  banners_height&#91;randno2&#93; + '" /></a>';
	var the_banner_3 = '<a href="' + banners_url&#91;randno3&#93; + '" target="_blank"><img src="' + banners_img&#91;randno3&#93; + '" width="' + banners_width&#91;randno3&#93; + '" height="' +  banners_height&#91;randno3&#93; + '" /></a>';
	var the_banner_4 = '<a href="' + banners_url&#91;randno4&#93; + '" target="_blank"><img src="' + banners_img&#91;randno4&#93; + '" width="' + banners_width&#91;randno4&#93; + '" height="' +  banners_height&#91;randno4&#93; + '" /></a>';

	// ...μέχρι το the_banner_10
	
	$&#40;'.banner-list li&#58;nth-child&#40;1&#41;'&#41;.html&#40;the_banner_1&#41;;
	$&#40;'.banner-list li&#58;nth-child&#40;2&#41;'&#41;.html&#40;the_banner_2&#41;;
	$&#40;'.banner-list li&#58;nth-child&#40;3&#41;'&#41;.html&#40;the_banner_3&#41;;
	$&#40;'.banner-list li&#58;nth-child&#40;4&#41;'&#41;.html&#40;the_banner_4&#41;;

	
	// ...μέχρι το .banner-list li&#58;nth-child&#40;10&#41;

&#125;
το αντίστοιχο markup είναι το:

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

<ul class="banner-list">
<li>banner 1</li>
<li>banner 2</li>
<li>banner 3</li>
<li>banner 4</li>
<li>banner 5</li>
<li>banner 6</li>
<li>banner 7</li>
<li>banner 8</li>
<li>banner 9</li>
<li>banner 10</li>
</ul>
Το βασικότερο πρόβλημα είναι πως ενώ πετυχαίνω το random της υπόθεσης δεν γνωρίζω πως να μην επιτρέπω την ίδια εικόνα να φορτώνεται πάνω από μία φορά. Καμμια ιδέα;

Επειδή δεν γνωρίζω παρά τα βασικά από jquery, μήπως υπάρχει κάποιος πιο "efficient" τρόπος να πετύχω αυτό που θέλω; Διότι κοιτάω τον κώδικα και βλέπω πολλές επαναλήψεις. Είμαι σίγουρος οτι υπάρχει, απλώς δεν γνωρίζω ποιος :roll:

Thnx in advance!
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery τυχαία επιλογή εικόνων

Δημοσίευση από fafos » 30 Ιούλ 2012 04:58

oho!! :o what is this?

vazeis tis eikones sou (kai oti allo thes) mesa sta li me class="image"

meta ftiaxneis mia function sthn opoia les an vrei idia na thn antikatasthsei me kapoia allh kai h loopa tha synexizetai mexri na vrei anomoies:

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

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
    $&#40;".image"&#41;.hide&#40;&#41;;

    var images = $&#40;".image"&#41;;
    var imageCount = images.size&#40;&#41;;
    var imagesToShow = 10;//poses na emfanizei
    var alreadyChoosen = ",";
    var i = 0;
    while &#40;i < imagesToShow&#41; &#123;
        var rand = Math.floor&#40;Math.random&#40;&#41; * imageCount&#41;;
        if &#40;alreadyChoosen.indexOf&#40;"," + rand + ","&#41; < 0&#41; &#123;
            alreadyChoosen += rand + ",";
            images.eq&#40;rand&#41;.show&#40;&#41;;
            ++i;
        &#125;
    &#125;
&#125;&#41;;



<ul class="banner-list">
<li class="image">banner 1</li>
<li class="image">banner 2</li>
<li class="image">banner 3</li>
<li class="image">banner 4</li>
<li class="image">banner 5</li>
<li class="image">banner 6</li>
<li class="image">banner 7</li>
<li class="image">banner 8</li>
<li class="image">banner 9</li>
<li class="image">banner 10</li>
<li class="image">banner 11</li>
<li class="image">banner 12</li>
<li class="image">banner 13</li>
<li class="image">banner 14</li>
<li class="image">banner 15</li>
<li class="image">banner 16</li>
<li class="image">banner 17</li>
<li class="image">banner 18</li>
<li class="image">banner 19</li>
<li class="image">banner 20</li>
</ul>



H parapano function vgazei ta apotelesmata sthn seira.. an ta thes anakatemena kathe fora pou trexei, xrhsimopoihse allh mia function:

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

$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
    $&#40;".image"&#41;.hide&#40;&#41;;

    var images = $&#40;".image"&#41;;
    var imageCount = images.size&#40;&#41;;
    var imagesToShow = 10;
    var alreadyChoosen = ",";
    var i = 0;
    while &#40;i < imagesToShow&#41; &#123;
        var rand = Math.floor&#40;Math.random&#40;&#41; * imageCount&#41;;
        if &#40;alreadyChoosen.indexOf&#40;"," + rand + ","&#41; < 0&#41; &#123;
            alreadyChoosen += rand + ",";
            images.eq&#40;rand&#41;.show&#40;&#41;;
            ++i;
        &#125;
    &#125;

// anakatepse ta sana
&#40;function&#40;$&#41;&#123;
  $.fn.shuffle = function&#40;&#41; &#123;
    return this.each&#40;function&#40;&#41;&#123;
      var items = $&#40;this&#41;.children&#40;&#41;;
      return &#40;items.length&#41;
        ? $&#40;this&#41;.html&#40;$.shuffle&#40;items&#41;&#41;
        &#58; this;
    &#125;&#41;;
  &#125;
 
  $.shuffle = function&#40;arr&#41; &#123;
    for&#40;
      var j, x, i = arr.length; i;
      j = parseInt&#40;Math.random&#40;&#41; * i&#41;,
      x = arr&#91;--i&#93;, arr&#91;i&#93; = arr&#91;j&#93;, arr&#91;j&#93; = x
    &#41;;
    return arr;
  &#125;
&#125;&#41;&#40;jQuery&#41;;
$&#40;'ul.banner-list'&#41;.shuffle&#40;&#41;;
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Jquery τυχαία επιλογή εικόνων

Δημοσίευση από apsuh0s » 30 Ιούλ 2012 05:48

Σε ευχαριστώ fafo

Πατάτα είχα κάνει ε? :pint:

Θέλω να τα εμφανίζει με τυχαία σειρά και αυτό που έδωσες ναι μεν τα εμφανίζει μία φορά το κάθε ένα αλλά είναι πάντοτε σε αύξουσα σειρά. Γι αυτό δεν έβαζα στο ίδιο το markup τις εικόνες. Μπερδεύω κάτι;

Επίσης το container που διατάσονται οι εικόνες είναι 276px σε πλάτος. Έχω:

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

<ol class="banner-list clearfix">
	<li class="image"><a href="#"><img src="images/sponsors/1.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/2.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/3.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/4.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/5.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/6.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/7.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/8.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/9.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/10.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/11.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/12.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/13.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/14.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/15.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/16.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/17.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/18.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/19.jpg" /></a></li>
	<li class="image"><a href="#"><img src="images/sponsors/20.jpg" /></a></li>
</ol>

και στο css

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

.banner-list li  &#123; margin&#58; 0 26px 26px 0; width&#58; 125px; float&#58; left; &#125;
.banner-list li&#58;nth-child&#40;2n+2&#41; &#123; margin-right&#58; 0; &#125;
.clearfix &#123;*zoom&#58; 1;&#125;
.clearfix&#58;before,
.clearfix&#58;after &#123;display&#58; table;content&#58; "";&#125;
.clearfix&#58;after &#123;clear&#58; both;&#125;
και καταλήγει να στοχεύει το (2n+2) όπου να ναι.[/code]
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6228
Εγγραφή: 30 Νοέμ 2004 03:09

Jquery τυχαία επιλογή εικόνων

Δημοσίευση από fafos » 30 Ιούλ 2012 17:48

O 2os kodikas ta anakateuei.. den ta vgazei me auxousa seira (p.x. 3,9,11,15,2,19 klp)

auto pou kanei me to n einai fysiologiko.. h jquery den exafanizei ta li alla aplos ta kryvei(display:none).. h css synexizei na ta vlepei kanonika opote to 2n+2 douleuei sta li me thn seira kai meta h jquery ta anakateuei.. h lysh..

katargeis thn class .banner-list li:nth-child(2n+2) { margin-right: 0; }

prostheteis 2 nees classes me thn proth (thn leo extra) na exeis to { margin-right: 0; } kai sthn deuterh (thn leo extrab) vazeis oti allo thes...

ftiaxnoume mia function sthn jquery gia na paroume ola ta li kai na mas xexorisei osa einai style="display: list-item;" (h block gia tous palious IE).. auto to style to vazei h jquery me tis prohgoumenes functions..

efoson exoume mono ta li pou emfanizontai tou leme me mia synthikh kathe 2 li na valei to extra.. etsi sto 2.4.6.8.10 tha exei margin:0(an thes na emfanizei sta 1.3.5.7.9 allazeis se if (!(m % 2))

oloklhromenos o kodikas:

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

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	$&#40;".image"&#41;.hide&#40;&#41;;
	
	var images = $&#40;".image"&#41;;
	var imageCount = images.size&#40;&#41;;
	var imagesToShow = 10;
	var alreadyChoosen = ",";
	var i = 0;
	while &#40;i < imagesToShow&#41; &#123;
		
		var rand = Math.floor&#40;Math.random&#40;&#41; * imageCount&#41;;
		if &#40;alreadyChoosen.indexOf&#40;"," + rand + ","&#41; < 0&#41; &#123;
			alreadyChoosen += rand + ",";
			images.eq&#40;rand&#41;.show&#40;&#41;;
			
			++i;
		&#125;
		
	&#125;
	
	// anakatepse ta sana
	&#40;function &#40;$&#41; &#123;
		$.fn.shuffle = function &#40;&#41; &#123;
			return this.each&#40;function &#40;&#41; &#123;
				var items = $&#40;this&#41;.children&#40;&#41;;
				return &#40;items.length&#41;
				 ? $&#40;this&#41;.html&#40;$.shuffle&#40;items&#41;&#41;
				 &#58; this;
				
			&#125;&#41;;
		&#125;
		
		$.shuffle = function &#40;arr&#41; &#123;
			for &#40;
				var j, x, i = arr.length; i;
				
				j = parseInt&#40;Math.random&#40;&#41; * i&#41;,
				x = arr&#91;--i&#93;, arr&#91;i&#93; = arr&#91;j&#93;, arr&#91;j&#93; = x&#41;;
			return arr;
		&#125;
	&#125;&#41;&#40;jQuery&#41;;
	$&#40;'ol.banner-list'&#41;.shuffle&#40;&#41;;
	
	//vres tis photo ana 2 kai vale nea class
	var m = 0;
	$&#40;'.image'&#41;.each&#40;function &#40;&#41; &#123;
		var imgstyle = $&#40;this&#41;.attr&#40;'style'&#41;;
		imgstyle = imgstyle.split&#40;' '&#41;;
		imgstyle = imgstyle&#91;1&#93;.replace&#40;';', ''&#41;;
		if &#40;imgstyle == "list-item" || imgstyle == "block"&#41; &#123;
			if &#40;&#40;m % 2&#41;&#41; &#123;
				$&#40;this&#41;.addClass&#40;"extra"&#41;;
			&#125; else &#123;
				$&#40;this&#41;.addClass&#40;"extrab"&#41;;
			&#125;
			
			++m;
		&#125;
		
	&#125;&#41;;
	
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Jquery τυχαία επιλογή εικόνων

Δημοσίευση από apsuh0s » 30 Ιούλ 2012 18:53

fafos σε ευχαριστώ και πάλι. +1 μπύρα και από μένα να μετράς. Όταν γυρίσω σπίτι πιο βράδυ θα το κοιτάξω και θα ενημερώσω.
.ninja { color: black; visibility: hidden !important; }

Απάντηση

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

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

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