1. Tudásbázis
  2. Modulok használata
  3. CCK-mező megjelenítése overlay-ként

CCK-mező megjelenítése overlay-ként

Beküldte ipeto - 2013. november 3. 18.41
ipeto képe

Sziasztok!

Szeretnék készíteni egy olyan megoldást, ami bizonyos mezőtartalmakat (pl. térképet, esetleg szöveges tartalmat) egy ikonra kattintáskor rétegként jelenít meg az oldalon. Például olyat, mint itt a cím melletti térkép ikonra kattintva: http://www.calidadrural.es/aceite/23
Most épp a fancybox pluginnel próbálkozom, és addig eljutottam, hogy ha kirakok mondjuk egy térképet, akkor arra kattintva a térkép szépen megjelenik az overlay-en. Viszont az sehogy sem áll össze a fejemben, hogyan lehetne csak az ikonkattintásra előhozni, egyébként nyilván nem kell látszania.

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
Fancybox
Drupal verzió: 
7.x
Fórum: 
Modulok használata
Sk8erPeter képe

Beküldte Sk8erPeter - 2013. november 3. 22.32

Dokumentáció alapján:
http://fancyapps.com/fancybox/#examples

lásd például az "Inline" tartalom megjelenítését, a link:

<a class="various" href="#inline">Inline</a>

ez az inline id-vel ellátott DOM-elem tartalmát fogja megjeleníteni, ami most a példaoldalon ez:

  1. <div id="inline" style="width: 500px; display: none;">
  2.     <h2>Lorem ipsum dolor sit amet</h2>
  3.  
  4.     <p>
  5.         <a id="add_paragraph" class="button button-blue" href="javascript:;">Add new paragraph</a>
  6.         &nbsp;
  7.         <a href="javascript:$.fancybox.close();">Close</a>
  8.     </p>
  9.     <p>
  10.         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  11.     </p>
  12. </div>

Szóval magyarul egy lehetőség, hogy egyszerűen elrejted az adott mezőt, de megjelenítesz hozzá egy fentihez hasonló linket, ami az adott tartalom id-jára mutat anchorral (#valamiazonosito).

Aztán megjelenítheted iframe-ben is:

  1. <a class="various" data-fancybox-type="iframe" href="/demo/iframe.html">Iframe</a>

Nyilván a megfelelő osztállyal (class) kell helyettesíteni, itt a példában a various class-szel ellátott elemekre inicializálta a FancyBoxot (lásd JavaScript-fül).

Aztán AJAX-szal is be lehet tölteni természetesen tartalmat:

<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>

Na, de ott van a lehetőségek széles tárháza, a dokumentáció egész bőbeszédű. :)

1
0
ipeto képe

Beküldte ipeto - 2013. november 4. 13.47

Köszönöm, egészen sokat keresgéltem, éppen csak a megfelelő oldalon nem... :)

0
0
ipeto képe

Beküldte ipeto - 2013. november 6. 21.28

Alapvetően persze nagyon egyszerű elemekről van szó, viszont a hajam kihullott, mire összeraktam, lévén ilyesmivel eddig nem foglalkoztam.

A feladatban egy Leaflet térképet kell megjeleníteni az overlayen. A címet bekértem egy mezőben, majd ebből egy geofield-del lett térképi információ. Alapesetben ebből egyszerű Leaflet-térképet csinálni, csak a megjelenési formáját kell Leaflet-re állítani. Viszont itt a fenti megoldás érdekében köré kell rakni egy div-et: <div id="inline" style="width: 400px; display: none;">
Mivel amúgy is használok Display Suite-ot az oldalon, meg más ötletem nem volt, készítettem egy code field-et a DS-tal. Itt jött a következő gond: Nem találtam olyan tokent ami eleve a Leaflet-térképet adja vissza, csak a koordinátákat lehetett lekérdezni. Tehát kódból kellett generálni a térképet:

  1. $map = leaflet_map_get_info('OSM Mapnik');
  2. $map['settings']['zoom'] = 15;
  3.  
  4. $lon=$entity->field_vm_sell_map['und'][0]['lon'];
  5. $lat=$entity->field_vm_sell_map['und'][0]['lat'];
  6.  
  7. $features = array(
  9.         'type' => 'point',
  10.         'lon' => $lon,
  11.         'lat' => $lat
  12.       )
  13.     );
  14. print leaflet_render_map($map, $features, "400px");

Itt az tartott el egy jó darabig, amíg megtaláltam, hogy sima PHP-mezőben nem érhető el az $entity objektum, ehhez a Display Suite code szükséges.

Ez már szuperül kirajzolja a térképet, viszont ha elrejtem a div-et, akkor a felugró overlay-en csak egy szürke mező jelenik meg :( Újabb néhány órás keresgélés után megtaláltam, hogy előbb kell generálni a térképet és utána elrejteni. Így végül a DS-mezőbe még odabiggyesztettem ezt a kis div-bezáró jquery-kódot:
drupal_add_js('jQuery(document).ready(function () { jQuery("#inline").hide(); });', 'inline');

Persze simán lehet, hogy túlbonyolítottam, de azért jó kis feladat volt...

0
0