Avaleht
uus teema   vasta Tarkvara »  Programmeerimine »  Jquery mustvalge märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006
sõnum 01.07.2010 03:39:45 Jquery mustvalge vasta tsitaadiga
Tervist.

Mul on selline JQuery kood:
//FAAAAAAAAAAAAAAAAAAAADE
$(function() {
// OPACITY OF BUTTON SET TO 50%
$("img.recent").css("opacity","0.2");

// ON MOUSE OVER
$("img.recent").hover(function () {
   
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.2
}, "slow");
});
});// JavaScript Document


Nagu näha, peale minnes läheb opacity 100% peale. Kuid kas on kuidagi võimalik teha ka nii, et kui opacity pole 100%, siis on pilt mustvalge. Leidsin palju tutoriale, kuid mul probleem selles, et tegu on erinevate piltidega, mille andmebaas ette annab ning seetõttu oleks vaja, et mustvalgeks tegemine toimuks läbi koodi.

Ehk oskab keegi aidata?
Leidsin ka sellise asja:
http://www.pixastic.com/lib/download/
kuid ei oska seda ära ühendada oma koodiga.

Tänud ette.
_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
lepar
HV kasutaja

liitunud: 27.11.2006
sõnum 01.07.2010 09:06:31 vasta tsitaadiga
Kood võiks välja näha siis umbes nii..

$(document).ready(function() {
   var img = new Image();
   img.onload = function() {
   Pixastic.process(img, "desaturate", {
           average : false
        });
   }
document.body.appendChild(img);
img.src = "myimage.jpg";

$("img.recent").hover(function () {
    Pixastic.revert(document.getElementById("demoimage"));
});
}

Ma ei ole seda katsetanud nii et kindlasti on mõni typo sees vms..
Kommentaarid: 13 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 12
tagasi üles
vaata kasutaja infot saada privaatsõnum
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006
sõnum 01.07.2010 12:31:44 vasta tsitaadiga
Küsin kohe siin ära, kas on ka võimalik ilma selle Pixasticuta teha pilt mustvalgeks(Jquery abil)?
_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Fukiku
Kreisi kasutaja
Fukiku

liitunud: 06.11.2003
sõnum 01.07.2010 12:41:56 vasta tsitaadiga
Kaheldav, sa pead igal juhul kas pildifaili muutma või eelnevalt mustvalgeks tehtud pildi vastu vahetama, javascriptil sisse ehitatud sellist võimekust küll ei tohiks olla, et lennult pilte konvertida.
_________________
Foxic is just a simple fox
Enne kui sa küsid oma küsimuse - küsi seda vannipardilt! Rangelt soovitatav enne programmeerimise alafoorumisse uue teema tegemist.
Kommentaarid: 2 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 2
tagasi üles
vaata kasutaja infot saada privaatsõnum
lepar
HV kasutaja

liitunud: 27.11.2006
sõnum 02.07.2010 08:37:00 vasta tsitaadiga
tsitaat:
Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript.
Kommentaarid: 13 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 12
tagasi üles
vaata kasutaja infot saada privaatsõnum
Kethmar
Kreisi kasutaja
Kethmar

liitunud: 21.06.2006
sõnum 04.07.2010 12:34:53 vasta tsitaadiga
Jup, sellest saan ma isegi aru, kuid puuduvad piisavad teadmised, et Pixasticut ja oma koodi ühendada.
_________________
Kodulehekülg: http://kethmar.ee/university
Vajad veebilahendust või graafilist abi? Küsi pakkumist. HV Rahvale alati odavamalt.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 24
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
matis
HV kasutaja
matis

liitunud: 12.04.2004
sõnum 18.07.2010 21:00:48 vasta tsitaadiga
javascript:
  1.  
  2. <script type="text/javascript"><!--
  3. //FAAAAAAAAAAAAAAAAAAAADE
  4. $(function() {
  5.         //set up the hover and mouseout function animation
  6.         $("img.recent").hover(function () {
  7.                 // SET OPACITY TO 100%
  8.                 $(this).stop().animate({opacity: 1.0}, "slow");
  9.         },
  10.  
  11.         // ON MOUSE OUT
  12.         function () {
  13.                 // SET OPACITY BACK TO 50%
  14.                 $(this).stop().animate({opacity: 0.2}, "slow", "swing", function() {
  15.                         var img2 = Pixastic.process(this, "desaturate");
  16.                         $(img2).mouseover(function() { $(this).animate({}, 10000, "swing", Pixastic.revert(this)); });
  17.                 });
  18.         });
  19.        
  20.         // make the image opacity to low
  21.         $("img.recent").css("opacity","0.2");
  22.         //make the images desaturated on the page load
  23.         $("img.recent").each(function(index, value) {
  24.                 var img2 = Pixastic.process(value, "desaturate");
  25.                 $(img2).mouseover(function() { Pixastic.revert(this); });
  26.         });
  27. });
  28.  
  29. // --></script>
  30.  


Täislahendus on siin:
http://www.liiviarts.com/pixastic/page.html

Päris nii ei saanud teha, kui tahtsid, sest niipea kui pildi teeb mustvalgeks, lõpeb fademise animatsioon ja pilt on plaksti mustvalge (pixastistic konverteerib pildi canvas objektiks ja selle opacityt jquery seada ei oska...).
Ainult nii sai teha, et fademine toimub ära ning seejärel tehakse pilt mustvalgeks.

EDIT: Natukene tuunisin koodi käitumist, peaks nüüd vähemalt nii olema, et hiirega pealt ära minnes läheb kohe mustvalgeks ja alles siis fadeb ära.
Hiirega peale tulles kahjuks kohe lööb värvid sisse ja siis kaob fade ära.
Proovi seda koodi siin postituses ja seda koodi, mis on lehel endal.

Seda ka, et pixastic töötab ainult HTML5-ga (canvas).
_________________
https://www.e-abi.ee/ - Pangalingid, Smartposti, Post24 moodulid, Järelmaksumoodulid. Magento, Prestahop, Wordpress. Aktsepteerin Bitcoini!
Soovid lisada oma tooteid HinnaVaatlusesse? https://www.e-abi.ee/magento/kasulikud/product-exporter-and-multi-product-feed-generator-hinnavaatlus.html
Kommentaarid: 64 loe/lisa Kasutajad arvavad:  :: 1 :: 1 :: 60
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  Programmeerimine »  Jquery mustvalge
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.