I want to take the values from database such as name,email and photo for a particular user and when he clicks the view button the same details should be seen in popup can i achieve in ionic2..
Any help will be appreciated..
You cannot do it using Alert component.If you need to do that then you have to use page component.On page component where you can show your images and all other db fetched stuff.
.html
<ion-content padding>
<img src="{{imageUrl}}" alt="image">
</ion-content>
.ts
this.imageUrl = imageUrl;
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
How to always show thumbnails in fotorama? Got a gallery with only one image and I want to show the thumbnail too and they are only shown when there are two pics or more.
Use enableifsingleframe flag:
<div class="fotorama" data-enableifsingleframe="true">
<img src="1.jpg"> <img src="2.jpg">
</div>
I have an appgyver app that I've tried to display images via
<img src="app/common/assets/pic.jpg"/>
<img src="common/assets/pic.jpg"/>
<img src="assets/pic.jpg"/>
<img src="pic.jpg"/>
<img src="http://www.somegoogleimage.com/pic.jpg"/>
Nothing shows. I'm confused out of my wits! I've also tried ng-src directive as source. Help !
create a folder in your supersonic project
app/common/assets/images
Put your images in app/common/assets/images
src =/images/yourimage.jpg
I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:
1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails
2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.
here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html
At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.
everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.
it's just this nuisance that's making an otherwise smooth functionality go to heck.
any kind of help would be appreciated, thanks so much in advance!
Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script
$('.fancybox').fancybox({});
and 6 links with the same class as the selector bound to fancybox like
<a class="fancybox" href="{target}" .... etc
then fancybox will generate 6 thumbnails ... so far so good.
What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails
<div style="width: 820px; height: 546px;" id="content"></div>
but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.
Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.
Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.
EDIT : New questions asked:
I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?
Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.
Regarding the functionality you ask, what I would do is:
1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to
#content a {
position:absolute;
visibility: hidden;
}
3: change this script
$(function(){
$('.image').live('click',function(){
var href = $(this).attr('href');
if ($('#content').is(':visible')) {
$('#content').css('visibility','hidden');
}
$('#content').load('#load #'+href,function(){
$('#content').css('visibility','visible').hide().fadeIn('3000');
});
});
return true;
})
into this
$(function(){
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
}); // bind
}); // each
return false;
});
assuming that the thumbnails are in the same order as the links inside the DIV with id="content".
I haven't tested the code but it's pretty much what would do the trick
EDIT 2: code improved Some changes to the css and js
New css:
#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}
new js: displays the first big thumbnail on page load
$(function(){
$("#content a").eq(0).show();
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").hide().eq(i).fadeIn('3000');
}); // bind
}); // each
return false;
});
BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.