When the out transition finishes, the rest of the page goes up and then down again to make space for the next image. (Look at the gif I posted)
this is how I implemented the transition tag:
<div class="xs12 md6 lg6" >
<transition
v-if="heroImages[iterator] != undefined"
mode="out-in"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="iterator%2 == 1" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
<div v-else-if="iterator%2 == 0 && iterator != 4" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
<div v-else style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
</transition>
</div>
Iterator changes with a js function every 2 seconds. This make the image changing.
How can I avoid this graphic "glitch" between images?
Try to use v-show instead of v-if v-show vs. v-if and set height on your image style.
Related
I'm using vue-slick-carousel in my app. I have the following code:
<template>
<div id="app">
<div class="banner-container">
<div>
<VueSlickCarousel v-bind="settings">
<div v-for="item in items" :key="item.id">
<!-- ALTERNATIVE 1 (WORKS) -->
<div>
<a href="abc" target="_blank">
<img id="picture1" src="./assets/carouse-item.png" />
<div class="position-relative">
<div class="banner-description">
<span class="banner-title">
<a v-bind:href="'#'" class="header-anchor">#</a>
TITLE<br />
</span>
<span class="banner-alternative-text">
<a v-bind:href="'#'" class="header-anchor">#</a>
DESCRIPTION<br />
</span>
</div>
</div>
</a>
</div>
<!-- ALTERNATIVE 2 (DOESN'T WORK) -->
<!-- <Child :item="item"/> -->
</div>
</VueSlickCarousel>
</div>
</div>
</div>
</template>
There are 2 alternatives. Alternative 1 works fine:
Alternative 2 is basically the code under Alternative 2 extracted into a new component - Child. It produces this output:
I can't understand why just extracting the part of code into a new component changes the layout like that.
The source code of the app is available at https://github.com/marcinjahn/vue-carousel-issue.
Hi when I load the page I see the background of "images class" loading before the ng-src image is load
is there a way to fix that?
using Angular js
<div class="images" >
<img ng-if="expression" class="imgclass" ng-src="{{vm.src || '//:0' }}" />
<img ng-if="!expression" class="imgclass" ng-src="absolute url" />
</div>
I would try this:
<div class="images" ng-if="loaded===true" >
<img ng-if="expression" class="imgclass" ng-src="{{vm.src || '//:0' }}" ng-init="loaded = true"/>
<img ng-if="!expression" class="imgclass" ng-src="absolute url" ng-init="loaded = true"/>
</div>
I want to decrease the slider speed in Bootstrap, while changing one slide to another slide. And I want to decrease the time of animation while changing slide.
<section id="slide-show" style='display: <%= SiteMap.RootNode.Url!=SiteMap.CurrentNode.Url?"none":"block" %>'>
<div id="slider" class="sl-slider-wrapper">
<!--Slider Items-->
<div class="sl-slider">
<!--Slider Item1-->
<div class="sl-slide item1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="themes/images/bdev.png" alt="" />
<h2>Time-to-fill</h2>
<h3 class="gap">Benefit from our services include short recruitment cycle for a
quicker "Time-to-fill". </h3>
<%-- <a class="btn btn-large btn-transparent" href="#">Learn More</a>--%>
</div>
</div>
</div>
Add the following script in your HTML. 1000 equal to 1 second.
<script>
$('.sl-slider').carousel({
interval: 10000
});
</script>
Refer http://getbootstrap.com/javascript/#carousel for more information.
i need hide pics and no use display:none
I use Highlight script for create one gallery , the problem it´s i need only show 4 pics and no the others , the script let click in one pic and show the others with arrows , the problem it´s if i use display:none for the other pics and no in the first 4 , the other pics no show finally
I try other possibilities , but no works , i need hide all pics out of the firsts 4 but i can´t use display:none
The Best Regards
You can easily change this Highslide example gallery: http://highslide.com/examples/gallery-thumbstrip-above.html to have four visible thumbnails in the page instead of one visible thumbnail. The clue is to move the markup for the thumbnails you want to be visible, outside the hidden-container div.
The example gallery has one thumbnail outside the hidden-container div (see the source code).
jsFiddle with four visible thumbnails: http://jsfiddle.net/roadrash/Un4N7/ The HTML markup of a gallery with eight images, but only four visible thumbnails, will look like this:
<div class="highslide-gallery">
<a href="large-image1.jpg" onclick="hs.expand(this)" />
<img src="thumbnail1.jpg" alt="" />
</a>
<a href="large-image2.jpg" onclick="hs.expand(this)" />
<img src="thumbnail2.jpg" alt="" />
</a>
<a href="large-image3.jpg" onclick="hs.expand(this)" />
<img src="thumbnail3.jpg" alt="" />
</a>
<a href="large-image4.jpg" onclick="hs.expand(this)" />
<img src="thumbnail4.jpg" alt="" />
</a>
<div class="hidden-container">
<a href="large-image5.jpg" onclick="hs.expand(this)" />
<img src="thumbnail5.jpg" alt="" />
</a>
<a href="large-image6.jpg" onclick="hs.expand(this)" />
<img src="thumbnail6.jpg" alt="" />
</a>
<a href="large-image7.jpg" onclick="hs.expand(this)" />
<img src="thumbnail7.jpg" alt="" />
</a>
<a href="large-image8.jpg" onclick="hs.expand(this)" />
<img src="thumbnail8.jpg" alt="" />
</a>
</div>
</div>
I have been struggling with a problem for a while now. I've made a simple html gallery using CSS and a # href to essentially swap out different div ID's containing gallery images. The problem is that when you select the "next" or "previous" buttons in the gallery it jumps the page up in the browser so the gallery is aligned at the top of the page. Does anybody have any ideas how to prevent this?
Here is what the code for the gallery looks like:
<div id="pic1">
<img src="click/pic1.jpg" alt="" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
</div>
<div id="pic2">
<img src="click/pic2.jpg" alt="" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"> <b>Next</b></a>
</div>
<div id="pic3">
<img src="click/pic3.jpg" alt="" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
</div>
<div id="pic4">
<img src="click/pic4.jpg" alt="" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"> <b>Next</b></a>
</div>
<div id="pic5">
<img src="click/pic5.jpg" alt="" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
</div>
<div id="pic7">
<img src="click/pic7.jpg" alt="" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
</div>
<div id="pic9">
<img src="click/pic9.jpg" alt="" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
</div>
<div id="pic10">
<img src="click/pic10.jpg" alt="" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"> <b>Next</b></a>
</div>
Any help would be greatly appreciated!
Instead of linking to #, link to javascript:void(0);
<a class="previous" href="javascript:void(0);">Next</a>
Or, prevent the default event with Javascript
$("a.previous, a.next").on("click", function(e) {
e.preventDefault();
});
You will need to use JQuery after you set
<a class="previous" href="javascript:void(0);">Next</a>
then call the JS:
$(document).ready(function(){
$('a.previous').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3));//gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID-1)).show(); //show the previous div
});
$('a.next').click(function(e){
var picID= parseInt($(this).parent().attr("id").substr(3)); //gets the pic id count
$("#pic"+(picID)).hide(); //hide the current div
$("#pic"+(picID+1)).show(); //show the previous div
});
});
see: http://jsfiddle.net/uZ6g5/