mouseover Effekt für Standard-Galerie

Guschtl

Hallo,

ich bin Fotograf und betreibe eine Fotoseite mit Wordpress 3.5.1.
Meine Fotos stelle ich mit der Standard-Galerie von Wordpress dar.

Ich würde nun gerne einen mouse-over effekt für die Gallery einbauen.
Und zwar soll beim "über das Bild fahren" ein Spotmesskreis und AF-Punkte über dem Thumbnail eingeblendet werden. Ich habe mir gedacht, ich würde ein transparentes png erstellen, und ein Plug-In (oder so) würde mir diese Funktion ermöglichen. Leider habe ich kein passendes Plug-In gefunden.

Am liebsten wäre es mir, wenn ich diesen Effekt speziellen Galerien zuweisen könnte. Also nicht global für alle.

Hier mal ein Beispiel zur Verdeutlichung: http://www.digital-artistry.de/people/
Nur wird dort "nur" ein Fadenkreuz eingeblendet, ich hätte aber gernen einen Spotmesskreis oder das 1D-Oval von Canon.

Für jeden Tipp dankbar!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Guschtl

Kann mir jemand helfen, genau DAS will ich bei mir einbauen:
http://webdesignandsuch.com/create-overlay…er-jquery-css3/

aber wie...
er schreibt man müsste "<span class="roll" ></span>"[FONT=arial] vor dem Bild hinzufügen, aber bring ich das in das Wordpress reingeprügelt?[/FONT]

BumbleBee

Steht doch alles auf der Seite!

Das ist jetzt die Version nur über CSS3:
Code für die Style.css:

Code

span.rollover {
    opacity: 1;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    background:url(images/mag.png) center center no-repeat #000;
    cursor: pointer;
    height: 346px;
    width: 347px;
    position: absolute;
    z-index: 10;
    opacity: 0;
}




span.rollover:hover {
    opacity: .7;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
}

Alles anzeigen

Und dann bindest Du Bilder über diesen Code ein:

Code

<a class="image"  href="#">
    <span class="rollover" ></span>
    <img class="imgborder" alt="" src="http://XXXXXXX/images/pic2.jpg">            
</a>

Bei dem Code für die style.css muss man auf die Werte von Höhe und Breite achten, da man die dem eigenen Theme anpassen muss!

Und der Code zum einbinden in den Artikel, kannst Du so über den Editor im HTML-Modus eingeben!

Guschtl

Hallo,

mir ist klar, dass ich den CSS-Teil in meine CSS kopiere.
Aber wie bekomme ich das <span class="rollover" ></span> in die Galerie rein?
Ich vermute, genau darüber wird der Efekt getriggert, oder?

im texteditor (einen HTML-editor sehe ich nicht) steht für eine typische gallery bei mir sowas:

Code

[gallery order="ASC" orderby="title" link="file" columns="4" ids="4926,4927,4928,4929,4930,4931,4932,4933,4934,4935,4936,4937,4938,4939,4940,4941,4942,4943,4944,4945,4946,4947,4948,4949,4950,4951,4952,4953,4954,4955,4956,4957,4958,4959,4960,4961,4962,4963,4964,4965,4966,4967,4968,4969,4970,4971,4972,4973,4974,4975,4976,4977,4978,4979,4980,4981,4982,4983,4984,4985,4986,4987,4988,4990,4991,4992,4993,4994,4995,4996,4997,4998,4999,5000,5001,5002,5003,5004,5005,5006,5007,5008,5009,5010,5011,5012,5013,5014,5015,5016,5017,5018,5019,5020,5021,5022,5023,5024,5025,5026,5027,5028,5029,5030,5031,5032,5033,5034,5035,5036,5037,5038,5039,5040,5041,5042,5043,5044,5045,5046,5047,5048,5049,5050,5051,5052,5053,5054,5055,5056,5057,5058,5059,5060,5061,5062,5063,5064,5065,5066,5067,5068,5069,5070,5071,5072,5073,5074,5075,5076,5077,5078,5079,5080,5081,5082,5083,5084,5085,5086,5087,5088,5089,5090,5091,5092,5093,5094,5095,5096,5097,5098,5099,5100,5101,5102,5103,5104,5105,5106,5107,5108,5109,5110,5111,5112,5113,5124"]

WP macht daraus dann folgenden HTML:

HTML

<div id='gallery-1' class='gallery galleryid-4859 gallery-columns-4 gallery-size-thumbnail'><dl class='gallery-item'>


            
<dt class='gallery-icon'>


                
<a href="http://www.xxxx.net/wp-content/uploads/2013/01/ID_21300143.jpg"  title='ID 21300143'><img width="200" height="200" src="http://www.xxxx.net/wp-content/uploads/2013/01/ID_21300143-200x200.jpg" class="attachment-thumbnail" alt="ID 21300143" /></a>


            
</dt></dl><dl class='gallery-item'>


            
<dt class='gallery-icon'>


                
<a href="http://www.xxxx.net/wp-content/uploads/2013/01/ID_21300146.jpg"  title='ID 21300146'><img width="200" height="200" src="http://www.xxxx.net/wp-content/uploads/2013/01/ID_21300146-200x200.jpg" class="attachment-thumbnail" alt="ID 21300146" /></a>


            
</dt></dl><dl class='gallery-item'>

Alles anzeigen

Aber wie bekomme ich da das

HTML

<span class="roll" ></span>

vor <img rein?

BumbleBee

Artikel oder Seite der Gallerie aufrufen! Bearbeiten, auf HTML-Modus gehen.

Anstatt [gallery] (oder wie auch immer Du Deine Galerie aufrufst) gibst Du eben das ein:

Code

<a class="image" href="#">
<span class="rollover" ></span>
[gallery]
</a>

Willkommen! Melden Sie sich an oder registrieren Sie sich.

mouseover Effekt für Standard-Galerie

Jetzt mitmachen!