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>
Related
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.
I would like to displays images s in the image bellow
I do know that I can use laravel chunk() helper function to achieve this which is what I have done but as bellow
#foreach ($images->chunk(4) as $key=>$image)
<div class="row">
#foreach ($image as $item)
#if ($key===0)
<div class="col-md-3">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#else
<div class="col-md-4">
<div>
<span class="image-block block2">
<a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
<img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
</span>
</div>
</div>
#endif
#endforeach
</div>
#endforeach
this gives me the following result
From what you can see the rows not stopping at two and staking the remaining images as in the expected image. What could I be doing wrong or how could I do. The images could be as many as 200 and here I am just working with 12
In a dialog i want to display several download links with a caption on the same line :
<md-dialog-content>
<div align="center" id="download">
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>English PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>French PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/cartographies/{{currentCartography}}.vsd"
download>
<img src="style/images/vsd-icon.png" alt="Download VSD" width="15%" height="15%">
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>English PNG</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>French PNG</figcaption>
</figure>
</a>
</div>
</md-dialog-content>
But my links are displayed on different lines. I tried display: inline;but no luck.
Which gives this instead of a one line dialog :
use layout="row" inside your div tag.
<md-dialog-content>
<div align="center" id="download" layout="row">
// your anchor tag
</div>
</md-dialog-content>
note: as you uses <md-dialog-content> its means you are using angular-material-design
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/