nicht angemeldet
3 Bilder durch anklicken abwechselnd vergrößern/verkleinern
0 
Matthias Apsel
0 1 transform: scale()
3 Bilder durch anklicken abwechselnd vergrößern/verkleinern
Gunnar BittersmannHi,
ich habe 3 Bilder in einem Grid-Layout. Als Ausgangszustand beim aufrufen der Seite, sollen 2 Bilder klein sein (span3) und eines groß (span6). Jetzt möchte ich gern den Effekt haben, dass ein Bild was klein ist, durch anklicken groß wird und die jeweils anderen 2 Bilder klein bleiben/werden usw. Kennt Ihr da vielleicht ein (jQuery)-Script, das ich dafür nehmen könnte, bzw. einen Ansatz für eine Umsetzung.
Danke und Gruß
Chriss
-
Om nah hoo pez nyeetz, Chriss!
Meine Lösungsskizze hat den Nachteil, dass alle Bilder in groß geladen werden und den Vorteil, dass beim Ändern keine Unterbrechungen zu sehen sind.
HTML
<figure class="gallery"> <img scr="..." alt="aussagekräftiger Alernativtext" class="zoom"> <img scr="..." alt="aussagekräftiger Alernativtext"> <img scr="..." alt="aussagekräftiger Alernativtext"> </figure>JavaScript (JQuery)
$('.gallery > img').click(function(){ $('.gallery > .zoom').removeClass('zoom'); $(this).addClass('zoom'); });CSS
.gallery > img { width: 30%; transition: width 0.2s ease-in-out; } .gallery > img.zoom { width: 100%; transition: width 0.2s ease-in-out; }Matthias
-
Om nah hoo pez nyeetz, Chriss!
Das wünsch ich dir auch Matthias!
Vielen Dank für deinen Code. Das war genau das, wonach ich gesucht hatte. Ich hatte zwar noch etwas Arbeit, die Bilder auf mein Responsive-Layout anzupassen, aber jetzt klappt alles!
Schöne Grüße
Chriss -
Om nah hoo pez nyeetz, Chriss und Matthias!
.gallery > img { > width: 30%; > transition: width 0.2s ease-in-out; > } > .gallery > img.zoom { > width: 100%; > transition: width 0.2s ease-in-out; > }Oder man verwendet 'transform: scale()'.
Demo: http://www.html-seminar.de/beispiel-css3-transform-scale-hover.htm
Gruß Gunther
PS: @Matthias Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?
-
Om nah hoo pez nyeetz, Gunther!
Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?
Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |) und auch im zitierten Text vorkommen können. Die Klasse q innerhalb von code gar nicht erst zu setzen, wäre u.U. cleverer. Ich weiß allerdings nicht, welche Nebenwirkungen das hat und wie groß der Programmieraufwand wäre, den Christian leisten müsste.
Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?
Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |) und auch im zitierten Text vorkommen können. Die Klasse q innerhalb von code gar nicht erst zu setzen, wäre u.U. cleverer. Ich weiß allerdings nicht, welche Nebenwirkungen das hat und wie groß der Programmieraufwand wäre, den Christian leisten müsste.
Das Einfügen der jeweiligen Zitatzeichen bei der Antwort zu verhindern, scheint mir aber die einzige "sinnvolle" Variante zu sein.
Ich habe zwar keine Ahnung, wie der Code aufgebaut ist, aber so spontan würde ich einfach mal sagen, dass eine Funktion dafür sorgen muss, dass zwischen [code ...] und [/code] (jeweils inklusive) einfach keine Zitatzeichen eingefügt werden. Das sollte dann eigentlich auch keinerlei Nebenwirkungen haben können.
Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.
Bist du sicher, dass das reicht?
Würde da nicht u.a. die erste Zeile Fehlen, weil der kein <br> vorausgeht?Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.
Bist du sicher, dass das reicht?
Hast du denn mein Fragezeichen nicht gesehen? ;-)
Würde da nicht u.a. die erste Zeile Fehlen, weil der kein <br> vorausgeht?
Bei der ersten Zeile steht das Zitatzeichen vor [code].
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Laus und Lauschaer Glas.
-
Om nah hoo pez nyeetz, Gunther!
Schick mir doch bitte den regulären Ausdruck, um die möglichen Zitatzeichen nach einem <br>(?) zu entfernen. Beachte, dass sie auch mehrfach auftreten können.
Folgendes habe ich jetzt in meinem User-JS:
$(document).ready(function(){ $('code').each(function(){ var inhalt = $(this).html(); inhalt = inhalt.replace(/^(»» |» |>> |> |\| )+/,''); [code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne langinhalt = inhalt.replace(/">(»» |» |>> |> || )+/,'">');
// Zitatzeichen unmittelbar nach <span ...>
inhalt = inhalt.replace(/<br>(»» |» |>> |> || )+/g,'<br>');
$(this).html(inhalt);
});
});[/code]
Es funktioniert, ob unter allen Umständen, weiß ich nicht.
Das ist natürlich für mich allein überdimensioniert, weil ich nur "»» " als Zitatzeichen habe, aber ich werde mal mit allen testen.Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
$(document).ready(function(){
$('code').each(function(){
var inhalt = $(this).html();
inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
[code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne lang> inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">'); > `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript} > inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>'); > $(this).html(inhalt); > }); > });[/code] zudem ~~~javascript $('code .q').parents('code').addClass('q');und dann der Selektor
$('code.q').each(function(){statt$('code').each(function(){und noch eine andere Farbe für die veränderten Code-Blöcke
code.q.block { background: none repeat scroll 0 0 #8A9DA8; }Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
$(document).ready(function(){
$('code').each(function(){
var inhalt = $(this).html();
inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
[code lang=javascript]// Zitatzeichen unmittelbar nach <code> für code ohne lang> > inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">'); > > `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript} > > inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>'); > > $(this).html(inhalt); > > }); > > });[/code] Es steht natürlich > im Quelltext.$(document).ready(function(){
$('code .q').parents('code').addClass('q');
$('code.q, .q code').each(function(){
var inhalt = $(this).html();
// inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
[code lang=javascript]// Zitatzeichen unmittelbar nach <code>inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">'); `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript} inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>'); $(this).html(inhalt); }); })[/code] > und noch eine andere Farbe für die veränderten Code-Blöcke > ~~~css code.q.block { > background: none repeat scroll 0 0 #8A9DA8; > } >Das können auch noch andere sein.
code.q.block, .q code.block { background: none repeat scroll 0 0 #f1f3f4; }Matthias
-
-
-
-
@@Matthias Apsel:
nuqneH
Im Nachhinein nur schwer, weil es ja verschiedene sein können (»» ,», >>, >, |)
Ein IMHO unsinniges Feature dieses Forums. Bringt keinen Mehrwert, aber Probleme. Sollte entsorgt werden.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Om nah hoo pez nyeetz, Gunther!
Oder man verwendet 'transform: scale()'.
Demo: http://www.html-seminar.de/beispiel-css3-transform-scale-hover.htm
- eine Seite, die konsequent(!) von CSS-Befehlen spicht o.O
- transform statt width (@Chriss: … wohlgemerkt, nicht etwa transform statt transition) halte ich bei Bildern nicht für notwendig.
Matthias
-
Om nah hoo pez nyeetz, Gunther!
PS: @Matthias Kann man eigentlich die Zitatzeichen bei Antworten in Code-Blöcken nicht automatisch eliminieren!?
Ich habe noch ein paar Veränderungen vorgenommen:
JavaScript
$(document).ready(function(){ $('code .q').parents('code').addClass('q'); $('code.q, .q code').each(function(){ var inhalt = $(this).html(); // inhalt = inhalt.replace(/^(»» |» |>> |> |\| )+/,''); [code lang=javascript]// Zitatzeichen unmittelbar nach <code>inhalt = inhalt.replace(/">(»» |» |>> |> || )+/,'">');
// Zitatzeichen unmittelbar nach <span ...>
inhalt = inhalt.replace(/<br>(»» |» |>> |> || )+/g,'<br>');
// Zitatzeichen unmittelbar nach <br>
$(this).html(inhalt);
});
$('.q').each(function(){
if ($(this).find('.block')) {
var inhalt = $(this).html();
inhalt = inhalt.replace(/(»» |» |>> |> || )+<code/g,'<code');
// Zitatzeichen unmittelbar vor <code> mit Klasse block
$(this).html(inhalt);
}
});
});[/code]
CSScode.q.block, .q code.block { background-image: url(quote.png), linear-gradient(to bottom, #f1f3f4, #f1f3f4); background-repeat: no-repeat, no-repeat; background-position: 2px .3em, 0 0; background-size: auto, 22px 100%; padding-left: calc(.5em + 22px); border-color: #f1f3f4; }quote.png
Stellt sich die Frage, ob man dies
- nur für den, der möchte (via Tipps und Tricks für die individuelle Ansicht)
- für alle angemeldeten
- für alle
anbietet.Folgende Probleme sehe ich dabei:
- Der unbedarfte Nutzer wird versuchen, die Zitatzeichen aus dem Textfeld zu entfernen.
- Bei Verwendung von ">" ist nicht getestet, ob vielleicht zu viele ">" entfernt werden.
- Es werden möglicherweise auch Zitatzeichen vor einzeiligen code-Elementen entfernt, nämlich dann, wenn in einem Zitat-span, beide code-Varianten vorkommen.Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Folgende Probleme sehe ich dabei:
Manchmal bleiben auch Zitatzeichen übrig:
Beispiel:Da ich Tippfehler vermeiden wollte, habe ich nun eine "Autocomplete" Funktion mit eingebaut. Das funktioniert auch super, allerdings werden mir diese ausgewählten Eingaben dann nicht mehr mit an den URL gehängt. Ich weiß das mein Code "+ textbox.value" das Problem ist, weil der URL mit meinem restlichen "linkhref" ergänzt wird. Was muss ich denn ändern, damit meine "Auswahl" auch übernommen wird? Ich komme hier einfach nicht weiter.
<script>
$(function() {
var availableTags = [
"Neu",
"New",
"Hallo",
"Test"
];
function split( val ) {
return val.split( /;\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( "; " );
return false;
}
});
});
</script>
</head>
<body><label for="tags">Titel: </label>
<input type="text" id="tags" onchange="adjustLink();" />
<a href="#" id="filterLink">Filtern</a>
<script type="text/javascript">
function adjustLink() {
var link = document.getElementById("filterLink");
var textbox = document.getElementById("tags");
link.href = "AllItems.aspx?FilterName=Title&FilterMultiValue=" + textbox.value;
}
</script></body>
</html>Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [rho und Rhodos](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=R#rho). -
Om nah hoo pez nyeetz, Matthias!
Folgende Probleme sehe ich dabei:
Habe ich das insoweit richtig verstanden, als dass wenn ich jetzt das JS einbinde, dieses bei jedem Seitenaufruf nach entsprechenden Code-Blöcken auf der Seite sucht, und dann ggf. die Zitatzeichen daraus entfernt?
Ich glaube ja nach wie vor, dass es "besser" wäre CK zu fragen, ob er nicht einfach das Einfügen von Zitatzeichen in Code-Blöcken "unterbinden" kann?
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Habe ich das insoweit richtig verstanden, als dass wenn ich jetzt das JS einbinde, dieses bei jedem Seitenaufruf nach entsprechenden Code-Blöcken auf der Seite sucht, und dann ggf. die Zitatzeichen daraus entfernt?
Ja.
Ich glaube ja nach wie vor, dass es "besser" wäre CK zu fragen, ob er nicht einfach das Einfügen von Zitatzeichen in Code-Blöcken "unterbinden" kann?
Das stimmt. Ich habe Christian gefragt. Er meinte, der Aufwand wäre nicht unerheblich. In V4 werden keine Zitatzeichen mehr in die Beiträge eingefügt.
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Das stimmt. Ich habe Christian gefragt. Er meinte, der Aufwand wäre nicht unerheblich. In V4 werden keine Zitatzeichen mehr in die Beiträge eingefügt.
Dann lass' uns doch auf V4 warten! ;-)
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Dann lass' uns doch auf V4 warten! ;-)
Du kannst dich ja schon durch Tests an der Entwicklung beteiligen. http://forumtest.selfhtml.org/
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Dann lass' uns doch auf V4 warten! ;-)
Du kannst dich ja schon durch Tests an der Entwicklung beteiligen. http://forumtest.selfhtml.org/
Hab' ich doch schon ..., hab' nur im Moment relativ wenig Zeit.
Wenn, dann sollte man ja nach Möglichkeit auch etwas Sinnvolles beitragen können, und das erfordert i.d.R. ja dann doch eine etwas intensivere Beschäftigung mit der Materie, und somit halt auch mehr Zeit ...!Ich hab's aber im Hinterkopf! ;-)
Gruß Gunther
-
-
Om nah hoo pez nyeetz, Gunther!
Dann lass' uns doch auf V4 warten! ;-)
Du darfst aber trotzdem mein JS und CSS verwenden ;-) Über Rückmeldungen wäre ich dankbar.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mars und Marschflugkörper.
-
Om nah hoo pez nyeetz, Matthias!
Du darfst aber trotzdem mein JS und CSS verwenden ;-) Über Rückmeldungen wäre ich dankbar.
OK, ich teste das gerne. Dann gib' mir doch bitte mal einen Tipp, wie ich das am einfachsten bewerkstelligen kann, da ich schon die 'http://forum.de.selfhtml.org/js/forum.js' in meinen Einstellungen einbinde - danke!
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
OK, ich teste das gerne. Dann gib' mir doch bitte mal einen Tipp, wie ich das am einfachsten bewerkstelligen kann, da ich schon die 'http://forum.de.selfhtml.org/js/forum.js' in meinen Einstellungen einbinde - danke!
Du kannst http://selfhtml.apsel-mv.de/test/selfhtml-gunther.js einbinden. Hab ich einfach hintereinander kopiert. Ist im Moment nur auf "»» " als Zitatzeichen eingestellt.
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Du kannst http://selfhtml.apsel-mv.de/test/selfhtml-gunther.js einbinden. Hab ich einfach hintereinander kopiert. Ist im Moment nur auf "»» " als Zitatzeichen eingestellt.
Das ist ja Service - danke! :-)
Jetzt habe ich überhaupt erst geschnallt, was dein Skript bewirkt. ;-)
Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.
Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Jetzt habe ich überhaupt erst geschnallt, was dein Skript bewirkt. ;-)
Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.Nein, dort sind sie mMn unabkömmlich.
Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.
Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?
Nein, in der Vorschau sollst du das Posting sehen, wie es von einem "normalen" Nutzer gesehen wird.
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Ich war die ganze Zeit davon ausgegangen, dass die Zitatzeichen bereits in der Textarea beim Antworten entfernt werden.
Nein, dort sind sie mMn unabkömmlich.
Tatsächlich "verschwinden" sie aber bloß in der Anzeige/ Ansicht eines Beitrags, d.h. sie sind nach wie vor vorhanden.
Blöde Frage: Greift das Benutzer-Skript nicht bei Antworten?
Nein, in der Vorschau sollst du das Posting sehen, wie es von einem "normalen" Nutzer gesehen wird.
Dann lohnt doch der ganze Aufwand gar nicht. ;-)
Wenn sich die Zitat-Zeichen nicht "generell" komplett entfernen lassen, ist alles andere ja nur reine "Kosmetik".Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Dann lohnt doch der ganze Aufwand gar nicht. ;-)
Naja doch, wir könnten dies ja auch für jeden Nutzer einstellen, dann wäre es selbstverständlich auch in der Vorschau zu sehen.
Wenn sich die Zitat-Zeichen nicht "generell" komplett entfernen lassen, ist alles andere ja nur reine "Kosmetik".
Kosmetik ist es sowieso. Ja.
Matthias
-
Om nah hoo pez nyeetz, Matthias!
Dann lohnt doch der ganze Aufwand gar nicht. ;-)
Naja doch, wir könnten dies ja auch für jeden Nutzer einstellen, dann wäre es selbstverständlich auch in der Vorschau zu sehen.
Ich hatte aber auch zumindest den subjektiven Eindruck, dass das Skript eine "merkliche" Zeit braucht. Das wäre für einige Nutzer ggf. nicht so vorteilhaft ...!
Gruß Gunther
-
Om nah hoo pez nyeetz, Gunther!
Ich hatte aber auch zumindest den subjektiven Eindruck, dass das Skript eine "merkliche" Zeit braucht. Das wäre für einige Nutzer ggf. nicht so vorteilhaft ...!
Die reine Ausführungszeit des Skriptes beträgt für diesen Thread rund 20ms. Zusätzliche Ladezeit dürfte sich auch in Grenzen halten, weil das Skript in ein bestehendes integriert wird.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Messer und Messergebnis.
-
-
-
-
-
-
-
-
-
-
-
-
-
Om nah hoo pez nyeetz, Matthias !
Ich muss das nur mal live am lebenden Objekt testen ...
JavaScript
$(document).ready(function(){
$('code .q').parents('code').addClass('q');
$('code.q, .q code').each(function(){
var inhalt = $(this).html();
// inhalt = inhalt.replace(/^(»» |» |>> |> || )+/,'');
[code lang=javascript]// Zitatzeichen unmittelbar nach <code>> inhalt = inhalt.replace(/">(»» |» |>> |> |\| )+/,'">'); > `// Zitatzeichen unmittelbar nach <span ...>`{:.language-javascript} > inhalt = inhalt.replace(/<br>(»» |» |>> |> |\| )+/g,'<br>'); > `// Zitatzeichen unmittelbar nach <br>`{:.language-javascript} > $(this).html(inhalt); > }); > $('.q').each(function(){ > if ($(this).find('.block')) { > var inhalt = $(this).html(); > inhalt = inhalt.replace(/(»» |» |>> |> |\| )+<code/g,'<code'); > `// Zitatzeichen unmittelbar vor <code> mit Klasse block`{:.language-javascript} > $(this).html(inhalt); > } > }); > });[/code] > CSS > ~~~ code.q.block, .q code.block { > background-image: url(quote.png), linear-gradient(to bottom, #f1f3f4, #f1f3f4); > background-repeat: no-repeat, no-repeat; > background-position: 2px .3em, 0 0; > background-size: auto, 22px 100%; > padding-left: calc(.5em + 22px); > border-color: #f1f3f4; > } >Stellt sich die Frage, ob man dies
- nur für den, der möchte (via Tipps und Tricks für die individuelle Ansicht)
- für alle angemeldeten
- für alle
anbietet.
Folgende Probleme sehe ich dabei:
- Der unbedarfte Nutzer wird versuchen, die Zitatzeichen aus dem Textfeld zu entfernen.
- Bei Verwendung von ">" ist nicht getestet, ob vielleicht zu viele ">" entfernt werden.
- Es werden möglicherweise auch Zitatzeichen vor einzeiligen code-Elementen entfernt, nämlich dann, wenn in einem Zitat-span, beide code-Varianten vorkommen.
Gruß Gunther
-
-
-