Im using in my project angular 1.5.5 and Bootstrap v3.3.6
I want to have slider on my platform so I did use uib-carousel
This is my html code:
<uib-carousel active="active"
interval="wellcomePage.myInterval"
no-wrap="wellcomePage.noWrapSlides"
no-pause="true">
<uib-slide ng-repeat="slide in wellcomePage.slides track by slide.id" index="slide.id">
<div class="slajd" ng-style="{height:wellcomePage.pageHeigth+'px','background-image':'url({{slide.image}})'}">
<div class="intro">
<div class="intro-body">
<p id="intro-text">{{slide.title}}</p>
<p id="intro-text-italic">{{slide.teaser}}</p>
</div>
</div>
</div>
</uib-slide>
</uib-carousel>
and this is my angular wellcomePage.slides:
wellcomePage.slides = [
{
id:0,
image: "/img/wellcomepageSlides/hello1.jpg",
title: "Yo",
teaser: "Hi there"
},
{
id:1,
image: "/img/wellcomepageSlides/hello2.jpg",
title: "Wellcome",
teaser: "Be good"
}];
The first problem is that when I open my page the first time an image is loading from top to down and slider is loading like this:
The second problem is when i push arrow > to slide i see something like this, and that it take while to load image from top to down:
What I have already tried:
Image preload using ionic.ion.imagecachefactory, I have used it like they said here https://github.com/andrewmcgivery/ionic-ion-imageCacheFactory Images are preloading but what I see on slider is not changeing.
I have also tried preloading from here http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm
I thought that it coud be my dybamic window height height:wellcomePage.pageHeigth, I have set it to static 500px in html but it didn't helped.
I have tried set 'background-image':'url({{slide.image}})' as 'background-image':'url(/img/wellcomepageSlides/hello1.jpg)' but it also didn't help
And I have no idea what is wrong, can any body help me, please?
Related
I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal.
Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.
Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.
Two of many images to open:
<div class="gallery-item-left col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...
My jQuery code
jQuery(document).ready(function($) {
$('body').on('click', '.gallery-item', function() {
var position = $(this).data('position');
$('#img-viewer-modal').modal('open');
$('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
$('#img-viewer-carousel').carousel('set', [position - 1]);
});
#img-viewer-carousel is simply the carousel id inside my modal.
I'm very thankful for every tip.
The only workaround I've found is to dynamicly change the content items of the carousel.
See example under https://www.codeply.com/go/EiubFqcKcg
I would like to make an image gallery that is similar to Google images gallery layout but I couldn't find any useful example to approach. I would like to show the larger image right below or above the image that is clicked using angularjs.
I started working on a plunker example but don't have any idea how to achieve this. I could able to display the image either on the top of all images or below all the images. Any thoughts on how to achieve this using angularjs and ui-bootstrap. Thanks in advance.
Plunker Link : https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview
View:
<div ng-controller="CollapseDemoCtrl">
<div ng-repeat="image in images track by $index">
<img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
</div>
<div>
<img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
</div>
</div>
You were nearly there. Only thing missing was to move the image inside the repeater.
Added this to your controller.
$scope.setImage = function(index){
$scope.visibleIndex = index;
}
And this to your markup:
<div ng-show="visibleIndex == $index"><br />
<img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>
I have updated your plunker:
https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview
Is it possible to change the background image for each view using Dojo Mobile ?
For instance :
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">View 1</h1>
<ul data-dojo-type="dojox/mobile/RoundRectList">
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-props='icon:"images/i-icon-1.png",
moveTo:"view2",
transition:"slide"'>Go To View 2</li>
</ul>
</div>
<div id="view2" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading"
data-dojo-props='back:"View 1",
moveTo:"view1"'>View 2</h1>
</div>
Example here : http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/View.html
If I put something like
style="background-image: url(../images/test-background.png) in the div section of view1, only the div will be backgrounded by the image whereas I want the whole body to be backgrounded. If I background the body with the image, the image is splitted in other views(since the views are in the same body) whereas I just want the view1 to be backgrounded by the image.
Any advice?
Thanks in advance
You can style the background of a mobile view using regular CSS.
See the example image below; it shows this demo with the Buttons view selected, styled with a purple background using the Developer Tools. If your background styles are not properly being applied to the view as a whole, please post your code or a snippet of your code that demonstrates the problem, as I suspect your styles are being applied incorrectly.
First answer works but not for the whole view, just for the div:
What works is :
<div style="background:yellow;min-height:100%" id="view0" data-dojo-type="dojox/mobile/View">
//whatever you want
</div>
What is important is min-height:100%
Without it :
With it :
I'm building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.
You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>
im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.
You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});
Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you