Popup de imagem usando jQuery do risco | Krishnaa Kumar | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Popup de imagem usando jQuery do risco

teacher avatar Krishnaa Kumar, Your Best Mentor :-)

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

7 aulas (14 min)
    • 1. Apresentação

      0:30
    • 2. Pacote jQuery

      0:49
    • 3. Sobreposição

      3:03
    • 4. Imagem grande

      2:19
    • 5. Código de jQuery

      2:29
    • 6. Botão Fechar

      2:40
    • 7. Botão de Fechar jQuery

      2:35
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

71

Estudantes

--

Sobre este curso

Olá a todos,

Neste curso, vamos criar pop-up de imagem usando o jQuery absolutamente do zero. Certifique-se de que você tem algum conhecimento básico do jQuery e do CSS. Se você não tem, você pode simplesmente acompanhar porque criar esse popup de imagem é muito fácil.

Vou usar o Texto Sublime como meu editor de texto e testarei a página da Web no host local usando o XAMPP. Depois de concluir o curso, você pode baixar o projeto e modificá-lo conforme sua necessidade.

Conheça seu professor

Teacher Profile Image

Krishnaa Kumar

Your Best Mentor :-)

Professor

I am a software developer. I have been developing softwares for the last 3 years. I know many programming languages and would love to teach you all of them. I create mini-projects for beginners in various languages like C#, JavaScript, CSS3, HTML etc.

If you are beginner and wants to start with some mini projects to learn basics, then just don't be reluctant, Enroll Now!

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: mais alto nós faríamos esta classe. Você vai aprender como você pode criar uma imagem pop-up usando J equity. Isto será para um lote colocado quando ele vai clicar sobre esta imagem, você vai obter esta imagem pop-up. Você também pode fechar esta imagem pop-up usando esta letra X Aqui no carregamento da página. Você também pode carregar esta imagem. Acordei assim. Certifique-se de que você tem algum conhecimento básico sobre segurança, e a CIA diz que se você não tem, você pode simplesmente seguir junto porque patinar como Mitch pop up é muito, muito fácil. Vendo a aula, Como vou ficar? 2. Pacote jQuery: Oi, pessoal. O que é o todo? Nunca faça o download do decreto. Arquive o site do decreto. Tem que clicar neste botão. Quando você clicar neste fardo, você vai pegar essa cadela. E nesta página você tem que selecionar este pacote, que é para a produção. Quando você clicar neste link, você receberá esta cadela Este seu arquivo decreto, você sabe, você sabe, para pressionar controlar-nos quando um teclado para salvar este arquivo, clique em Salvar Grã-Bretanha para salvar o arquivo. Quando você terminar com o download, você receberá o decreto arquivando esta pasta decreto. Então, isso é tudo o que você precisa para baixar o decreto arquivado no próximo vídeo. Vamos começar com o processo de decodificação. Vê o próximo vídeo? Como Aleister. 3. Sobreposição: Oi, todo mundo. Neste, vamos começar com o processo de gravação Esta estrutura de estimativa simples na seção do coração, temos que usar o arquivo de consulta org referenciado, que é neste mundo. Er em equidade. Basta copiar o nome e fazer uso off elemento script aqui. Ou você pode dizer script de volta. Fazer uso fora do atributo de origem. E a localização é decreto pasta o manco fino e ponto Sim, salve-o. Não, você não me disse no raio Holder. Já tenho imagens azuis. Faça a imagem do negócio do tempo. E esta é a imagem original. Meteoros fora de Magalhães implicam. A fonte será imagens do gpt obtido. Salve isso. Vá para o navegador. Você é uma camisa nova e esta é a saída. Agora, neste caso, depois do que você será Mas eu vou clicar nesta imagem. Quero mostrar a imagem marginal com o fundo do cão. Vamos ao arquivo do tribunal, fazer uso do desenvolvimento. E eu não fiz este caso vai chegar cedo. Basta dizer sobre isso Não em seu estilo dia tiro para ter o fundo do cão ir para arquivo novo arquivo e salvá-lo como o meu iniciado ou CSS não me toe link este arquivo usando o link de volta agora Selecione este desenvolvimento que tem a idéia fora cedo. Por isso, será hash bully cor de fundo será hash pessoas zero para o fundo do cão Como será 100% onde será 100% posição será corrigido. Top será zero direita Boobie Zito Bottom será zero esquerda será zero Você vê isso? E quanto à profissão? Bom fazer uso off capacidade Hill e assunto apontado. Save it Nice Good índice sobremesa off um Então nós vamos ser o bem separado no próximo vídeo Nós vamos trabalhar com a imagem original mais cedo Next Rodeo Como quando eu sair? 4. Imagem grande: Oi, todo mundo. Até agora terminamos com a parte inicial. Isso funcionará com a imagem original. O que? O arquivo do tribunal bom para o desenvolvimento. Haverá elemento de imagem e os tipos serão imagens grande ponto Vice, você o i d fora só eu m g salvá-lo. Navegador de fotos. Você está pressionado. E esta é a saída. É bastante grande. Então temos que consertar isso. Bem, a sessão de estilo. Selecione o elemento de imagem. Este. Então, primeiro temos que tomar a idéia disso. Você e o elemento de imagem fazem a altura fora? Pobres desertores, disseram-nos 600 píxeis. Salve esta foto mais perto Refresher. Não, é e você até agora lá para fazer uso fora elemento tradição e torná-lo absoluto Stopfel ser 10% o que eu vou ser 10% de, como, torná-lo 20 e da esquerda para torná-lo 27. Bom navegador. Sem pressão. Então esta é a saída próxima imagem fixa. Faça-se margem de propriedade e torná-lo agradável. Faça uso desse índice e nu. Eu vejo isso perfeito. Até agora, terminamos com a imagem real. No próximo ano, eles vão começar a trabalhar com o Duke pronto para que quando clicarmos nesta imagem, nós vamos obter esta imagem com este único fundo. Veja no próximo vídeo, como um bom fazer. 5. Código de jQuery: Oi, todo mundo. Este trabalho real com o registro Jake para que nós vamos clicar nesta imagem vai obter esta imagem. Com esta vontade um fundo, precisamos usar a propriedade aqui, que será exibir nenhum. Então inicialmente esta ou é Nellie Mitch e a única parte será escondida. Ciric Good navegador para refrescá-lo. Então esta é a saída agora na estima e arquivo. Faça uso do script AG e dê isso para moer a idéia fora. Venha, use o documento. Função pronta. Digo-te apenas esta palavra. Pegue essa idéia e faça uso do ligamento. Eu só não sei isso. Nós não sabemos isso no clique de seu tempo, Neil, Nós queremos mostrar isso excessivamente e esta imagem original. E a idéia para isso é apenas fazer uso fora. Saiu em função e começou a fazer lento apenas balutis. Perfeito. Salve isso. Vá até Rosa Crusher. Clique na imagem. Então este é um santo sem cópias, Sr. Tail e torná-lo Realmente eu sou G e o elemento de imagem que é este então antes de tudo, oficial o com um fundo do que a imagem original. Salve isso. Pressioná-lo. Clique na imagem. E este é o Até agora que terminamos com o crítico. O próximo vamos tentar onde? Ali, mas aqui para esconder esta imagem. Veja o próximo vídeo. Tenha um bom dia. 6. Botão Fechar: Oi, todo mundo. Neste, vamos tentar. Para onde? O botão? Aqui para esconder esta imagem. Não precisamos de um botão. Você pode simplesmente fazê-lo fora do desenvolvimento com a letra X para que quando clicarmos sobre essa letra o mesmo, ele deve ser escondido. Vamos ao tribunal de Development Hill e dar a ideia. Fechar botão e será um Xa mais tarde. Salve isso. Não vá ao estilo. Atire. Selecione o fechamento. Mas uma identificação o arranca. 30 pixels. Deve haver branco, que vai com as pessoas esquerda cor de fundo será triplo zero, que é preto para dois. Será a prancha. Salve isso. Vá para o marco zero Refresher. Então este é um Burton, ou você pode ver nosso texto fazer uso fora do centro de linha extra aqui. Legal. Tornar o depoimento absoluto. Dê um índice de deserto de três. Agora clique na imagem. E esta é a Alberta. Você queria um pouco da colina lá para fazer-se margem esquerda propriedade e defini-lo para 9 45 pixels. Salve isso. Queremos contar. Então temos que fazer uso fora da margem superior. Faça com que 50 pixels negativos. Faça 1 70. Faça 1 68. Acho que será perfeito. Basta chegar a 65. Ótimo. Então nós temos Overton, ou você pode ver nosso texto, que é X No próximo ano, eles vão trabalhar com o código nervoso para que quando clicarmos nisso, esta imagem não deveria ser ouvida e ver o próximo vídeo? Tenha um bom dia. 7. Botão de Fechar jQuery: Oi. Todos na cidade se esforçarão demais. Esta imagem em cíclica esta letra X Mas antes de tudo, temos que esconder isso na página, Senhor, Senhor, para fazer uso fora da propriedade de exibição e sujeito a nenhum. Vês? O que? Que tal, uh, ir refrescá-lo. Então só temos tempo para curar. Não, vá para o arquivo de índice ou você pode ver o arquivo de estimativa. E aqui, faça você mesmo fluir. O Burton. Eu d comida em função e começou dedo lento. E ele tem vocês dois. Salve isso. Vá para o navegador seu flash shoot, Clique na imagem e este é o seu pequeno X. E esta é a imagem. Não, copie isto no Sr. To. Isso com as contas, mas um 90 e começar Fuding Poderíamos alimentar carvalho. Entendido, Sr. Hill e ele. Salve isso. Vá para Gaza, refresque-o. Clique nesta imagem e clique nesta letra X. Você pode ver as mídias desapareceram. Se você quiser carregar esta imagem original no carregamento da página, você pode fazer uso off river função aqui. Então será língua 0.3 a função e até mesmo Philby. Clique. Apenas dilua isso. Guarde-o, vá para Gaza, refresque-o. Você pode ver nem obter imagem na grande carga. Edição circulatória Worthy mostrou imagem no clique de uma miniatura só são pagos você. Olha, nós terminamos com o projeto e isso é muito colocado. Veja o próximo vídeo. Tenha um bom dia.