Carousel miniature

[blackskyisback]

Salve a tutti

qualcuno mi spiega perche' non riesco a visualizzare le miniature nella pagina?






ho trovato questo codice

<script>
jQuery(function($) {
	//on init:
	var coming_soon_carousel = $("#coming_soon_carousel");
	setupCarousel( coming_soon_carousel, 'horizontal' );
});
</script>

<div class="title_bar">Upcoming Updates</div>

<div class="coming_soon">
	<div class="coming_soon_arrow prev_arrow"></div>
	<div class="coming_soon_arrow next_arrow"></div>
	
	<div class="container">
		<div id="coming_soon_carousel" class="owl-carousel owl-theme">
		<!-- Coming Soon Updates -->
					<div class="coming_soon_carousel_item">
<div class="table">
	<div class="row">
		<div class="cell update_details">

			<!-- Date -->
			<span class="update_date">Coming 06/02/2021</span>

			<br />

			<!-- Thumbnail -->
			<img id="set-target-1495_comingsoon" width="235" height="170" alt="Coming Soon" class="upcoming_updates_thumb thumbs stdimage" src0_1x="/content//contentthumbs/45/09/4509-1x.jpg" src0_2x="/content//contentthumbs/45/09/4509-2x.jpg" src0_3x="/content//contentthumbs/45/09/4509-3x.jpg" cnt="1" v="0" />
		</div>
	</div>

	<div class="row">
		<div class="cell update_details">

quello che non mi e' chiaro sono questi pezzi di codice

src0_1x=

src0_2x=

src0_3x=


le immagini sono presenti nella cartella e il percorso e' corretto

ho provato anche in questi modi ma niente

content//contentthumbs/45/09/4509-1x.jpg

../content//contentthumbs/45/09/4509-1x.jpg

[GraphOGLRisorse]

Salve,
penso che quel codice sia incompleto, o meglio, neccisita di un altro codice per funzionare.

Normalmente nel tag immagine l'attributo è src. Esiste poi la possibilità di caricare un set di immagini:

<img src="image-src.png" srcset="img-1x.png 1x, img-2x.png 2x, img-3x.png 3x, img-4x.png 4x">

Ma questo viene usato per visualizzare immagini differento a seconda della risoluzione video.

Gli attributi non convenzionali; src0_1x, src0_2x e src0_3x dovrebbero essere recuperati in questo modo:

<script>
  var img1 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_1x");
  var img2 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_2x");
  var img3 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_3x");
</script>

Cordiali saluti.

[blackskyisback]

il codice dello script

https://owlcarousel2.github.io/OwlCarousel2/

faccio delle prove e vedo di modificare quello esistente

grazie

[blackskyisback]

non funziona questo metodo

<script>
  var img1 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_1x");
  var img2 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_2x");
  var img3 = document.getElementById("set-target-1495_comingsoon").getAttribute("src0_3x");
</script>

[GraphOGLRisorse]

Il metodo funziona, se usato nel modo corretto. Dubito che possa funzionare col tag img.

Io non intendevo dare per sottinteso che in quel modo funzioni con il tag img.

Ad sempio, è possibile con canvas fare una cosa di questo tipo:

<canvas id="canvas-multiimge" width="450" height="150" src1="img1.png" src2="img2.bmp" src3="img3.bmp"></canvas>

<script>
var test=test||{};
test.LoadMultiImg= function(objId,newValue) {

    var canvas = document.getElementById(objId);
		
    var imgage1 = canvas.getAttribute("src1");
    var imgage2 = canvas.getAttribute("src2");	
    var imgage3 = canvas.getAttribute("src3");	
	

    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);	

    var w=canvas.width;
    var h=canvas.height;
    var wh= w>h?h:w;	
	
    var img1 = new Image();
    img1.onload = function() {
	   ctx.drawImage(img1, 0,0, img1.width,img1.height, 0,0, w/3,h);
       ctx.fillStyle = "rgba(0, 0, 0, 0)";
       ctx.fillRect(0,0,w,h);
    };
    img1.src = imgage1;

    var img2 = new Image();
    img2.onload = function() {
	   ctx.drawImage(img2, 0,0, img2.width,img2.height, w/3,0, w/3,h);
       ctx.fillStyle = "rgba(0, 0, 0, 0)";
       ctx.fillRect(0,0,w,h);
    };
    img2.src = imgage2;	

    var img3 = new Image();
    img3.onload = function() {
	   ctx.drawImage(img3, 0,0, img3.width,img3.height, w/3*2,0, w/3,h);
       ctx.fillStyle = "rgba(0, 0, 0, 0)";
       ctx.fillRect(0,0,w,h);
    };
    img3.src = imgage3;	

};
test.LoadMultiImg('canvas-multiimge');
</script>

Cordiali saluti.

[blackskyisback]

non preoccuparti,figurati, sei stato abbastanza gentile ad aiutarmi

provero' l'altro tuo metodo

GRAZIE GraphOGLRisorse

ps: complimenti per il tuo sito, aggiungerei anche una sezione php

[GraphOGLRisorse]

provero' l'altro tuo metodo

Non c'è alcun problema per me, se e le va bene ugualmente.

Cercando ho trovato questo che potrebbe aiutarla a risolvere il problema.
Owl Carousel 2 Thumbnail Demo

I Thumbnail strutturato nel modo che sta cercando di usare, a me sembra affine al secondo metodo che avevo esposto e non fattible con il tag img, potrei però essere in errore io. Se linca qui un file di esmpio che ricrei la situazione mostrata nel suo primo messaggio, posso cercare di capire dov'è l'errore.

ps: complimenti per il tuo sito, aggiungerei anche una sezione php

Grazie del suggerimento, lo tengo in considerazione.

Cordiali saluti.

[blackskyisback]

la parte che non funziona e' questa

<!-- Thumbnail -->
			<img id="set-target-1495_comingsoon" width="235" height="170" alt="Coming Soon" class="upcoming_updates_thumb thumbs stdimage" src0_1x="content//contentthumbs/45/09/4509-1x.jpg" src0_2x="content//contentthumbs/45/09/4509-2x.jpg" src0_3x="content//contentthumbs/45/09/4509-3x.jpg" cnt="1" v="0" />

posto il codice con js, css e foto

https://yadi.sk/d/jA2BvI-jeDrTqg

[GraphOGLRisorse]

Sì avevo capito che il problema era relativo all'immagine del Thumbnail che non viene caricato, intendevo semplicemente che per cercare da cosa dipende il prbolema mi servia vedere il codice completo.

Nella libreria helper.js, che non è presente in OwlCarousel2, c'è questa parte:

		$(".stdimage").each(function(index) {
	
			o_img = $(this).attr("src")		

			if (zoom > 3.3 && ($(this).attr("src0_4x") != undefined))
			{
				n_img = $(this).attr("src0_4x")
			}
			else if (zoom > 2.3 && ($(this).attr("src0_3x") != undefined))
			{
				n_img = $(this).attr("src0_3x")
			}
			else if (zoom > 1.3 && ($(this).attr("src0_2x") != undefined))
			{			
				n_img = $(this).attr("src0_2x")
			}
			else
			{
				if ($(this).attr("src0_1x") != undefined)
				{
					n_img = $(this).attr("src0_1x")
				}
				else
				{
					n_img = $(this).attr("src0")
				}
			}
			
			if (n_img != o_img)
			{
				$(this).attr("src", n_img);
			}
		});

Quesota è la parte di che gestisce gli attibuti non convenzionali usati nel tag img. Da qui si capisce che tale metodo gestito tramite jquery, è l'equivaente di srcset di html5.

In precendenza non mi era ben chiaro se doveva comportarsi come il srcset o far caricare più immagini affiancate.

Nel file owl.carousel.css, la classe css owl-carousel pone la condizione iniziale dell'elemento come non visibile.

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; 
}

Per abilitare la visualizzazione immediata degli elementi tag img compreso, deve aggiungere la classe css owl-loaded:

<div id="coming_soon_carousel" class="owl-carousel owl-loaded owl-theme">

Se la miniatura(o Thumbnail), non riesce a visualizzarla col metodo jquery, provi ad esempio così:

 <picture>
  <source media="(min-width:650px)" srcset="content/contentthumbs/45/09/4509-3x.jpg">
  <source media="(min-width:465px)" srcset="content/contentthumbs/45/09/4509-2x.jpg">
  <img id="set-target-1495_comingsoon" src="content/contentthumbs/45/09/4509-1x.jpg"" alt="Coming Soon" style="width:235;height:auto;">
</picture> 		

Per eventuali aggiornamenti a riguardo, li aggiunerò qui.

Cordiali saluti.

[blackskyisback]

ok, provo e ti faccio sapere

Grazie