Új hozzászólás Aktív témák

• Medcomp tag

  #1891

  #1889 Sk8erPeter

  2010-10-30 21:36:11

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  #1889 Sk8erPeter

  #1889 Sk8erPeter

  Én clearbox-szal most kipróbáltam, és működött (mondjuk klikkelésre az alatta lévő kép a következőre ugrik, ahogy eddig is volt, de azt most nem keresgéltem, hol kell megszüntetni):
  ahol van a slideshow azonosítóval rendelkező div, ott kiegészíted:
  <div id="slideshow" class="slideshow" onclick=" CB_Open('href='+ $(this).find('img') .attr('src') );"></div>

  Így megnyitja a külön keretben azt a képet, amire épp kattintasz.

  Még egy amatőr kérdés.

  Hogy lehetne annyiban módosítani a dolgot, hogy kattintásra egy nagyobb képet jelenítsen meg? Próbáltam azt, hogy az IMG tagnek nek adtam egy src2 attribútumot, ahová a nagyobb kép linkje került, és az általad írt sorban az "src"-t módosítottam, de ez nem segített.

• Medcomp tag

  #1890

  #1889 Sk8erPeter

  2010-10-30 21:03:05

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  #1889 Sk8erPeter

  #1889 Sk8erPeter

  Én clearbox-szal most kipróbáltam, és működött (mondjuk klikkelésre az alatta lévő kép a következőre ugrik, ahogy eddig is volt, de azt most nem keresgéltem, hol kell megszüntetni):
  ahol van a slideshow azonosítóval rendelkező div, ott kiegészíted:
  <div id="slideshow" class="slideshow" onclick=" CB_Open('href='+ $(this).find('img') .attr('src') );"></div>

  Így megnyitja a külön keretben azt a képet, amire épp kattintasz.

  Nagyon nagy vagy!

  Sikerült megcsinálnom nekem is, így ahogy leírtad!

  Ha esetleg azt is meg tudnád mondani, hogy a következő képre lépést hol tudom kikapcsolni, akkor tényleg végtelen hálás lennék!

• Medcomp tag

  #1887

  #1884 Medcomp

  2010-10-28 17:28:00

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  #1884 Medcomp

  #1884 Medcomp

  Közben egy hibát találtam, a HEAD részben nem a jquery.js volt az első amit behívtam, ezt kijavítva addig eljutottam a COLORBOX-al, hogy a többi oldalon működik, ha képre kattintok, viszont a galériánál csak elfeketedik az egész oldal, és nem csinál semmit.

  Az nem lehet gond nálam, hogy mindkét script a

  jQuery(document).ready(function($)

  sorra kezdene el lefutni, és valahol összeakadnak? Nem lehetne valahogy különszedni, hogy pl a colorbox ne az oldal betöltődése után egyből fusson le, hanem esetleg 1 mp-el később?

• Medcomp tag

  #1884 2010-10-26 23:28:39

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  Közben egy hibát találtam, a HEAD részben nem a jquery.js volt az első amit behívtam, ezt kijavítva addig eljutottam a COLORBOX-al, hogy a többi oldalon működik, ha képre kattintok, viszont a galériánál csak elfeketedik az egész oldal, és nem csinál semmit.

• Medcomp tag

  #1883 2010-10-26 22:47:49

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  Azt kezdem végleg feladni, hogy a képre klikkelve jöjjön elő akár lightbox, akár bármi más "box". Most azt próbáltam, hogy a "Download" linkre beállítom, hogy arra klikkelve jöjjön elő a lightboxos kép, de az sem megy. Valahogy ha a galleriffic-hez szükséges javascript ott van a lap alján, akkor semmi más javascriptes dolog nem megy a "$(document).ready(function(){
  " részben. Próbáltam thickboxot, fancíboxot, clearboxot, lghtboxot. Ha az ő javascriptjüket teszem be a galleriffic elé, akkor a galleriffic nem megy, ha a galleriffic van elöl, akkor ezek nem mennek. Valakinek erre ötlete?

  Galleriffic kódja ez:

  <script type="text/javascript">
  jQuery(document).ready(function($) {
  // We only want these styles applied when javascript is enabled
  
  $('div.navigation').css({'width' : '285px', 'float' : 'left'});
  $('div.content').css('display', 'block');
  
  // Initially set opacity on thumbs and add
  // additional styling for hover effect on thumbs
  var onMouseOutOpacity = 0.67;
  $('#thumbs ul.thumbs li').opacityrollover({
  mouseOutOpacity: onMouseOutOpacity,
  mouseOverOpacity: 1.0,
  fadeSpeed: 'fast',
  exemptionSelector: '.selected'
  });
  
  // Initialize Advanced Galleriffic Gallery
  var gallery = $('#thumbs').galleriffic({
  delay: 2500,
  numThumbs: 12,
  preloadAhead: 10,
  enableTopPager: false,
  enableBottomPager: true,
  maxPagesToShow: 7,
  imageContainerSel: '#slideshow',
  controlsContainerSel: '#controls',
  captionContainerSel: '#caption',
  loadingContainerSel: '#loading',
  renderSSControls: true,
  renderNavControls: true,
  playLinkText: 'Lejátszás indítása',
  pauseLinkText: 'Lejátszás megállítása',
  prevLinkText: '&lsaquo; Elozo fotó',
  nextLinkText: 'Következo fotó &rsaquo;',
  nextPageLinkText: '&rsaquo;&rsaquo;&rsaquo;',
  prevPageLinkText: '&lsaquo;&lsaquo;&lsaquo;',
  enableHistory: false,
  autoStart: false,
  syncTransitions: true,
  defaultTransitionDuration: 900,
  onSlideChange: function(prevIndex, nextIndex) {
  // 'this' refers to the gallery, which is an extension of $('#thumbs')
  this.find('ul.thumbs').children()
  .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
  .eq(nextIndex).fadeTo('fast', 1.0);
  },
  onPageTransitionOut: function(callback) {
  this.fadeTo('fast', 0.0, callback);
  },
  onPageTransitionIn: function() {
  this.fadeTo('fast', 1.0);
  }
  
  });
  
  });
  </script>

  Ezt copy-pasteltem a tutorialból, csak a megjelenő angol szövegeket fordítottam.

• Medcomp tag

  #1882

  #1877 Sk8erPeter

  2010-10-26 21:04:18

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  #1877 Sk8erPeter

  #1877 Sk8erPeter

  Nézd át ennek az oldalnak a forráskódját, ott elég jól látszik, hova kell betenni!

  Amiket itt írnak, betetted az oldalad <head> részébe?
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
  
  <!-- Optionally include jquery.history.js for history support -->
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

  DE nagyon fontos, hogy ezeket töltsd is le a megfelelő helyekről (jQuery, jQuery History Plugin, stb.), és stimmeljen az elérési út! Tehát vagy tedd a "js" nevű könyvtárba, vagy írd át itt a fentiben a neked megfelelő elérési útra. (pl. src="pityipalko_konyvtar/jquery-1.3.2.js" )

  Az alábbi is benne lehet, de ez már a <body> részben, amúgy opcionálisak; ha a "thumbs" div-en belül az alábbi módon csinálod, akkor ahogy írják, így kell minden egyes thumbnailre (a thumbs-on belülieket (<ul class="thumbs noscript">-en belülit) kell ismételgetni minden kisképre, a többit ne ismételgesd):
  <div id="controls"></div>
  <div id="loading"></div>
  <div id="slideshow"></div>
  <div id="caption"></div>
  <div id="thumbs">
  <ul class="thumbs noscript">
  <li>
  <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
  <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
  </a>
  <div class="caption">
  (Any html can go here)
  </div>
  </li>
  ... (repeat for every image in the gallery)
  </ul>
  </div>

  Ezenkívül tedd be azt a hosszú
  jQuery(document).ready(function($) {
  ...
  }

  részt is a <head> részbe (vagy teheted a thumbs div UTÁN is, de ha nem a <head>-ben van, akkor mindenképp utána legyen) így:
  <script type="text/javascript">
  <!--
  jQuery(document).ready(function($) {
  ...
  }
  // -->
  </script>

  Kérdezz, ha valami nem világos.

  Na, most olvastam át az egészet, amit írtál. Ezt mind megcsináltam, a Galleriffic galléria működik is (ez eddig is ment, csak nem tudok normálisan fogalmazni). Ezt szeretném kiegészíteni egy Lightboxal, hogy amikor a megjelenő nagy képre kattintanak, akkor ne ugorjon a következő képre a galéria, hanem a lightboxal (vagy bármelyik alternatívájával) nyissa meg még nagyobba, egy új layeren.

• Medcomp tag

  #1880

  #1877 Sk8erPeter

  2010-10-26 18:14:19

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  #1877 Sk8erPeter

  #1877 Sk8erPeter

  Nézd át ennek az oldalnak a forráskódját, ott elég jól látszik, hova kell betenni!

  Amiket itt írnak, betetted az oldalad <head> részébe?
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
  
  <!-- Optionally include jquery.history.js for history support -->
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

  DE nagyon fontos, hogy ezeket töltsd is le a megfelelő helyekről (jQuery, jQuery History Plugin, stb.), és stimmeljen az elérési út! Tehát vagy tedd a "js" nevű könyvtárba, vagy írd át itt a fentiben a neked megfelelő elérési útra. (pl. src="pityipalko_konyvtar/jquery-1.3.2.js" )

  Az alábbi is benne lehet, de ez már a <body> részben, amúgy opcionálisak; ha a "thumbs" div-en belül az alábbi módon csinálod, akkor ahogy írják, így kell minden egyes thumbnailre (a thumbs-on belülieket (<ul class="thumbs noscript">-en belülit) kell ismételgetni minden kisképre, a többit ne ismételgesd):
  <div id="controls"></div>
  <div id="loading"></div>
  <div id="slideshow"></div>
  <div id="caption"></div>
  <div id="thumbs">
  <ul class="thumbs noscript">
  <li>
  <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
  <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
  </a>
  <div class="caption">
  (Any html can go here)
  </div>
  </li>
  ... (repeat for every image in the gallery)
  </ul>
  </div>

  Ezenkívül tedd be azt a hosszú
  jQuery(document).ready(function($) {
  ...
  }

  részt is a <head> részbe (vagy teheted a thumbs div UTÁN is, de ha nem a <head>-ben van, akkor mindenképp utána legyen) így:
  <script type="text/javascript">
  <!--
  jQuery(document).ready(function($) {
  ...
  }
  // -->
  </script>

  Kérdezz, ha valami nem világos.

  Köszi a tanácsokat, másfél óra és otthon leszek, kipróbálom, és megírom mire jutottam!

• Medcomp tag

  #1876 2010-10-25 23:16:16

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Medcomp

  tag

  Sziasztok!

  Olyan gondom lenne, hogy szeretnék egy Galleriffic 2.0-ás galériát összehozni Light/Thick/Clearboxal, már napok óta keresgélek, de nem találtam megoldást. Van egy régebbi verzió, amibe beletették, és egyben letölthető, de azt úgy ahogy van nem sikerült normális működésre bírnom, illetve volt egy találata a googlenek, ami nagyjából ennyit írt:

  To accomplish this, you will need to call the lightbox function each time an image/caption is loaded. You would need to do this in the galleriffic onTransitionIn callback like such:
  
  ...
  onTransitionIn: function() {
  $('#slideshow').fadeIn('fast');
  $('#caption').fadeIn('fast', function() {
  $('#caption a.lightbox').lightBox();
  });
  },
  ...
  
  Hope that helps!

  Viszont erre meg nem jöttem rá, hogy hová is kéne beletenni a javascriptbe, mert nincs konkrétan ilyen sor benne sehol.

  JS-hez elég hülye vagyok, így simán lehet, hogy csak én néztem el valamit nagyon, ha valakinek van ötlete, hogy hogy tudnám összehozni a kettőt, azt nagyon megköszönném!

Új hozzászólás Aktív témák