(1) Módulos necessários (Versão: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Instale os módulos
No Drupal7, você pode instalar módulos a partir da seção admin, mas ainda sinto que esse novo recurso não tem significado, porque precisamos procurar o link do módulo no site Druapl e copiar e colar na área de instalação do módulo admin, realmente louco. Teria sido tão bom se eles tivessem feito algo como wordpress um pequeno banquete de busca. Enfim, eu apenas vou baixar e instalar da maneira antiga (eu ainda recomendo essa maneira antiga).
Faça o download de todos os módulos do site Drupal e instale no diretório nome_do_seu_site / sites / todos / módulos. Acesse http://www.yoursitename.com/node#overlay=admin/modules e ative esses módulos como abaixo;
(1) Vistas (2) Vistas UI (3) Vistas Slideshow (4) Vistas Slideshow: Ciclo (5) Ferramentas de caos (6) Link (7) Bibliotecas (8) Token (Opcional) (3) Criar cache de imagem
No Drupal7, o imagecache faz parte do módulo principal e é denominado estilos de imagem. Então, vamos criar dois cache de imagem a partir daqui, um para a imagem deslizante em tamanho real e outro para a imagem em miniatura. Neste tutorial, utilizo a dimensão 935x293 (pixels) para a imagem do controle deslizante de tamanho completo e a dimensão 210x100 (pixels) para a imagem em miniatura. Nota: Essas configurações que podem ser adiadas dependem de suas necessidades.
- Configurações de imagem Slider de tamanho real
Vá para http://www.yoursitename.com/node#overlay=admin/config/media/image-styles e clique no link adicionar novo estilo (1) Dê um nome para o estilo de imagem e clique no botão criar novo estilo (2) ) Na próxima tela de configuração, selecione o novo estilo desejado e clique no botão Adicionar (neste tutorial, escolho o estilo de redimensionamento) (3) Na próxima tela, defina a largura e a altura e clique no botão Adicionar efeito. (As configurações podem variar dependendo do estilo que você escolher). Defino a largura como 935 e a altura como 293 pixels.
Faça o mesmo processo para a imagem em miniatura também. (para a dimensão da imagem em miniatura, defino a largura como 210 e a altura como 100 pixels.) (4) Criar novo tipo de conteúdo
Vamos criar um novo tipo de conteúdo. Na barra de menus do painel, clique em Estrutura e, em seguida, em tipos de conteúdo e clique no link Adicionar novo tipo de conteúdo.
(1) Dê um nome legível por humanos, o nomeiei como Slider em destaque (o nome da máquina será gerado automaticamente com base no nome legível por humanos) (2) Faça uma descrição breve e relevante (3) Configurações do formulário de envio, deixo como configurações padrão (4) Opções de publicação, verifiquei apenas as publicadas (todas as outras configurações desmarcadas) (5) Configurações de exibição, desmarquei as informações de autor e data. (6) Configurações de comentários, defino ocultas (desativadas) (7) Configurações de menu, deixo como configurações padrão. (8) Clique em Salvar e adicione campos Botão (5) Criar novos campos
Aqui neste exemplo, crio apenas dois arquivos e eles são campo de imagem e campo de link. Usaremos o campo de imagem para fazer upload da imagem do slider e o campo de link para criar um link personalizado onde queremos que o slider seja vinculado.
Configurações do campo de imagem
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
Defino esse campo conforme necessário, adicionei um nome de diretor de arquivo chamado slider-image para que essas imagens sejam organizadas de maneira séria a partir de outras imagens. Você pode definir o tamanho e a resolução máximos de upload aqui. Ativei o campo alt e title e, finalmente, clique no botão Salvar configurações.
Usando o mesmo método, crie também o campo do link.
Configurações do campo de link (1) Rótulo: Slider Link (2) Campo: slider_link (3) Tipo de campo: link (4) Widget (elemento do formulário): link (5) Clique no botão Salvar. Para as configurações do campo de link, deixe tudo para as configurações padrão . Eu organizei o campo como mostrado abaixo; Campo de título Campo de imagem Campo de vínculo Campo de corpo (você pode até remover esse campo, se não for necessário) Gerenciar exibição Na guia Gerenciar exibição, você pode configurar como a saída do campo deve ser exibida. Defina o campo do link como oculto e também o rótulo da imagem como oculto Drupal7: gerenciar campos (6) Criar conteúdo Slider de recurso
Criei quatro conteúdos de controle deslizante em destaque para este tutorial.
(1) Clique no link para adicionar conteúdo (2) Crie o conteúdo do slider em destaque (3) Dê um nome de título adequado (4) Carregue a imagem do slider (5) Dê os nomes dos campos alt e title (6) Dê o título e o URL do link onde desejar o controle deslizante a ser vinculado (7) Deixe todas as outras configurações como padrão, exceto o campo path, se desejar, você pode fornecer um alias de URL amigável para SEO. (8) Salve o conteúdo.
Da mesma forma, crie mais conteúdos Slider em destaque (criei quatro conteúdos) (7) Crie uma nova exibição
Agora é hora de criar nossa nova exibição de Slideshow. No menu Painel, clique em Estrutura e, em seguida, clique em Visualizações.
(1) Clique no link Adicionar nova visualização (2) Dê o nome da visualização, nomeei como Destaque Slider (o nome da máquina será gerado automaticamente) (3) Dê uma descrição apropriada da visualização (4) Escolha Mostrar conteúdo do tipo Slider em destaque (seu conteúdo Digite o nome). (5) Desmarque Criar uma página e selecione Criar um bloco. (6) Digite Título do bloco e escolha o formato de exibição como "Apresentação de slides" de itens de "campos" por página 5 (você pode inserir o número de itens que deseja exibir) (7). ) Clique no botão "Continuar e editar". Configurações do campo de visualizações Primeiro, vamos adicionar o campo do link (o link deve ser o primeiro campo para que tudo funcione corretamente), então clique no ícone Adicionar e, no filtro Grupos, selecione Conteúdo Adicionar conteúdo: Link, Clique em "Botão Adicionar e configurar" na próxima janela de cofiguração, desmarque "Criar um rótulo". "Verifica" Excluir da exibição. Clique no botão "Aplicar"
Em seguida, vamos adicionar o campo de imagem, então clique no ícone Adicionar e, no filtro Grupos, selecione o conteúdo Adicionar Conteúdo: campo de imagem (Nota: certifique-se de escolher o campo de imagem que criamos apenas para este tipo de conteúdo deslizante.) Clique em "Adicionar e configurar botão "na próxima janela de configuração desmarque" Criar um rótulo ".
Formatador: Imagem (se você instalou o Colorbox ou o lightbox, você pode escolhê-los aqui!) Estilo da imagem: tamanho real (escolha o arquivo de imagem que você criou na etapa acima) Vincule a imagem a: Nada Configurações de estilo: Deixe as configurações padrão Sem comportamento de resultado: Deixe configurações padrão Reescrever resultados: marque Saída este campo como um link Caminho do link: [view_node] (Nota: role um pouco mais e você poderá ver os padrões de substituição criados pelo módulo Core Token (se não tivermos definido o campo do link como primeiro não é possível ver a opção do campo de link aqui) copie apenas [view_node], role para cima e cole-o no campo de caminho do link.) Clique em "Aplicar botão"
Finalmente, precisamos de mais um campo para a miniatura; portanto, clique no ícone Adicionar e, no filtro Grupos, selecione Conteúdo Adicionar conteúdo: campo de imagem (Nota: certifique-se de escolher o campo de imagem que criamos apenas para este tipo de conteúdo deslizante). Clique em "Botão Adicionar e configurar" na próxima janela de configuração, desmarque "Criar um rótulo" e VERIFICAR EXCLUIR NO DISPLAY, Formatador: Imagem (se você instalou o Colorbox ou o lightbox, pode escolher aqui!) Estilo da imagem: Miniatura (Escolha o imagecache que você criou na etapa acima) Vincule a imagem a: Nothing Configurações de estilo: deixe as configurações padrão Sem comportamento de resultado: deixe as configurações padrão Reescrever resultados: marque a opção Output este campo como um link Caminho do link: [view_node] (Nota: role um pouco e você pode ver os padrões de substituição criados pelo módulo Core Token (se nãot defina o campo do link como primeiro, não podemos ver a opção do campo de link aqui) copie apenas [view_node] e role para cima e cole-o no campo do caminho do link.) Clique em "Aplicar botão"
Configurações de filtros de visualizações
Nas visualizações3, os filtros são criados no início, enquanto escolhemos o tipo de conteúdo e outras configurações! Se você precisar de algum filtro adicional, pode criá-lo aqui!
Configurações de estilo de vistas
Clique no formato Slideshow | configurações e na próxima janela de configuração definida como abaixo; (1) Tipo de lista: lista não ordenada (2) Classe de wrapper: deixe as configurações padrão (3) Estilo> Skin: deafult (4) Slides> Tipo de apresentação de slides: cycle (5) Opções de ciclo Você precisa fazer o download do plugin de ciclo do jQuery e copiar o jquery. cycle.all.min.js para sites / all / libraries / jquery.cycle Você pode encontrar o plugin em http://malsup.com/jquery/cycle .
EM INGLÊS SIMPLES Crie uma pasta chamada "bibliotecas" no diretório site / all e crie outra pasta chamada "jquery.cycle" nesse diretório e, finalmente, copie e cole apenas o "jquery.cycle.all.min.js" no diretório neste diretório.
(6) Trânsito: desvanecer-se (7) Ação: pausar ao passar o mouse (8) Ajustes do Internet Explorer: padrão (9) Widgets: você pode escolher um ou ambos, Superior e Inferior (eu escolho a parte inferior aqui e as configurações avançadas como abaixo;) (10) Widgets inferiores> Pager> Tipo de pager: Campos (11) Campo Pager: Conteúdo: Imagem (Nota: o último que adicionamos para o polegar, não se engane, pois os dois campos terão o mesmo nome.) (12) Ativar slide e Pausar no Pager Hove: marcado, os controles e o contador do controle deslizante ficam desmarcados. (13) Clique no botão Aplicar.
Formato Mostrar configurações de campo
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) Crie uma região personalizada (etapa opcional)
(1) Na pasta thems, abra o arquivo your_theme_name.info e adicione uma nova região como a mostrada abaixo; regiões [featured_slider] = Slider em destaque e salve o arquivo .info. (2) Abra o arquivo page.tpl.php de seus temas e adicione esses códigos onde deseja que o slide seja exibido como mostrado abaixo;
Você pode até criar um modelo de página inicial personalizado como page - front.tpl.php, para não precisar fazer alterações no modelo padrão page.tpl.php. [9] Ative e configure o bloco
Agora, este bloco estará visível na área de blocos desativados; portanto, no menu Painel, vá para Estrutura> Bloco e ative o bloco para uma região padrão de temas ou a região personalizada que criamos (featured_slider). (As regiões variam dependendo do tema que você está usando.)
Configurações de configuração do bloco Depois de habilitar o bloco, você obtém um link para configurá-lo; portanto, clique no link Configurar e na seção de configurações definidas como abaixo;
(1) Título do bloco (se você não quiser que o título do blobk seja exibido, basta digitar) (2) Novamente, você obtém todas as configurações de região específicas do tema ativadas. Nas configurações de visibilidade (3) Páginas> Mostrar bloco em uma página específica: escolha Apenas as páginas listadas e digite para que esse bloco seja exibido apenas na primeira página. DICAS CSS PARA EXIBIR THUMBNAILS INLINE
Adicione esses códigos CSS à folha de estilos dos seus temas para exibir as miniaturas em linha. .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float: left; margem: 20 px 6 px; } Faça os ajustes necessários.