this is my first question on Stackoverflow, I hope it makes sense :)
I need to create a swipeable image gallery with html content in each slide (text, images, external links, social network buttons etc) and full screen option.
Fotorama is the best solution I have found, I am a very big fan of it :)
However, I am finding it difficult to fit the html content in the gallery, as it gets cropped to the height of the first image.
I need the image to be in the html, not a background image. And I need all the content to be visible both in the normal mode and in the full screen mode. The text can vary in length and the images in size, so I cannot give the gallery a fixed height.
Does it make sense?
I couldn't find a similar question asked already, so if you have any idea please let me know!
Thanks :)
This is the simplified code of what I have done so far, any comment is more than welcome!
<div class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-click="false" data-width="100%">
<div data-thumb="image-01.jpg" id="slide1">
<h2>Title 01</h2>
<img src="image-01.jpg" width="100%">
<div class="content">
<p>Blah blah blah</p>
<div class="photoShare">
<h6>Share</h6>
<!-- Social Network Buttons -->
</div>
<div class="buyThisPhoto">
<!-- Buy this photo link -->
</div>
</div>
</div>
<!-- etc -->
Update:
I am working on possibe solution, using the API. Seems to work but any suggestion for improvement is welcome :)
$(function () {
var $fotoramaDiv = $('#fotorama').fotorama();
var fotorama = $fotoramaDiv.data('fotorama');
$('.fotorama').on('fotorama:ready ' + 'fotorama:show ' + 'fotorama:load ', function () {
var currentContainer = $(".fotorama__active").children('div');
var newHeight = /* calculate the height by adding up the heights of the elements contained in currentContainer */;
fotorama.resize({
height: newHeight
});
}).fotorama();
});
Related
I have searched the internet for a solution to this problem but have yet to come across one yet. I was hoping someone here has had experience with this and can help point me in the right direction.
I have a line chart created with Angular-nvd3 and I am using Bootstrap for responsiveness. Basically I have two charts per row. The problem I am running into is that when I first load the page, the charts are squished into a small width. I am not setting the width on the charts so that it can inherit 100% width and fill the container. As soon as I do anything with the browser, such as open the console or resize the browser, the charts scale to their correct width. I was wondering if there was any way to force a resize. I had a similar issue before when using c3d3 but using chart.resize() solved the issue. I do not know if nvd3 has a similar method as I do not have as much experience with nvd3. I was wondering if there was a similar method I could use or if there was a pure way with d3 to do this.
Here are some before and after pics to help visualize the issue:
Before:
After opening the console or resizing the browser in any way, it scales correctly:
EDIT: I should add that setting a fixed width circumvents the issue but then the inherent responsiveness goes away (new problems arise where graphs overlap at smaller browser sizes)
EDIT: Added Some code snippets that I hope can help. I am using rows and columns the Bootstrap way. I am also declaring the chart options in the JS
HTML
<div class="row">
<div class="col-sm-6">
<nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
</div>
<div class="col-sm-6">
<nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
</div>
</div>
JS
$scope.inletOptions = {
chart: {
type: 'lineChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) { return d.x; },
y: function(d) { return d.y; }
}
};
For those running into a similar issue, please see the following posts:
https://github.com/krispo/angular-nvd3/issues/259
http://plnkr.co/edit/ncT72d?p=preview
$scope.triggerResizeEvent = function() {
window.dispatchEvent(new Event('resize'));
}
If anyone is running into this problem, for me it was actually a very simple solution without a resize event.
This is my chart.
<div id="chart" class="row">
<div class="col-xs-12">
<svg>
</svg>
</div>
</div>
If I have no data to show, I simply hide the div using JavaScript:
function ShowChart(show) {
$('#chart').css("display", (show ? "block" : "none"));
}
But it was squished when I passed "true" to the function.
My solution was that I had to first show the div, then use .update() for the graph.
So, for me, this did not work:
d3.select("#chart svg").datum(chart_data);
chart.update();
ShowChart(true);
And this did:
ShowChart(true);
d3.select("#chart svg").datum(chart_data);
chart.update()
I am studying AngularJS by looking at the website http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents and downloaded the videos, then going through the examples on my computer.
Everything went well until the video codeschool_1329.mp4, otherwise called "Shaping_Up_With_Angular_JS_Level_2b". The example works correctly when the logic for selecting the panels is in the HTML code, but when the logic is moved to a controller, it no longer works correctly. Thus I have the relevant HTML code:
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(1)}">
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<!-- Repeated for Specifications and Reviews -->
</ul>
</section>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<!-- Repeated for Specifications and Reviews -->
and for the JavaScript code I have:
app.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab === checkTab;
};
});
exactly as in the video. The latter is with the Angular module and another Angular controller for the store.
With both Google Chrome and Firefox, when I click on the each of the tabs "Description", "Specifications" and "Reviews", the selected tab is highlighted, as in the video, albeit blue rather than dark purple, but the text that is supposed to be displayed below the selected tab does not show up at all. It looks as if there is some type of a problem with the isSelected function in PanelController with ng-show="panel.isSelected(1)", etc. in the lower part of the HTML code, although it appears to work correctly with ng-class="{active:panel.isSelected(1)}" when the tab is highlighted.
This works correctly when the logic for this is in the HTML code, as I said above, but no matter what I can do, I am unable to get this to work correctly when the logic is in PanelController.
There must be something simple that I am missing, and would be grateful to get this sorted out - many thanks.
<section ng-controller="PanelController as panel">
...
</section>
<div class="panel" ng-show="panel.isSelected(1)">
Only the section element is controlled by the panel controller, but you're trying to use panel.isSelected(1) out of that section. So that can't work.
Put the div inside the section, or wrap everything with another div and move ng-controller="PanelController as panel"to that wrapping div.
I'm developing an Angular single-page app with a responsive layout. The current page I'm working on uses a tile-based layout that auto wraps extra tiles to the next row. The HTML is below and, in the responsive layout, it can show 1, 2, or 3 tiles per row depending on the width of the row (it positions them using floats).
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="tile_2">...</div>
<div class="tile_3">...</div>
<div class="tile_4">...</div>
<div class="tile_5">...</div>
...
</div>
Now each tile will be given a "Learn More" button. The design calls for a block to expand between the row of the selected tile and the row below. This block will be the full width of the row and will be closed when the user closes it or clicks on a different Learn More button.
My first thought was to arrange the HTML as below using ng-if to hide or display the expander divs but I can't figure out the CSS needed to have it display between the rows.
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="expander_1">...</div>
<div class="tile_2">...</div>
<div class="expander_2">...</div>
<div class="tile_3">...</div>
<div class="expander_3">...</div>
<div class="tile_4">...</div>
<div class="expander_4">...</div>
<div class="tile_5">...</div>
<div class="expander_5">...</div>
...
</div>
My second thought, since I'm using Angular, was to somehow use transcluding or including to insert the relevant HTML into the appropriate spot. Again, I can't figure out how to identify where I need to insert the HTML?
I've tried searching around for other people's solutions to similar problems since I figured its not that unusual a requirement but I haven't yet been able to find anyone else who is doing this.
Can anyone else suggest what I need to do to identify the where to insert the HTML or how to generate the CSS? Or even suggest another solution that I haven't considered yet?
Although I have 70% understand of what you mean, I think ng-class can simply solve what you've faced. The solution code is like below. And I setup jsfiddle.
Html looks like this.
<div ng-app="" ng-controller="MyCtrl">
<div class="tiled_panel">
<div>Tile 1 <a href ng-click="change_tile(1)">More</a></div>
<div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div>
<div>Tile 2 <a href ng-click="change_tile(2)">More</a></div>
<div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div>
</div>
</div>
Your controller code looks like this.
$scope.change_tile = function(value){
$scope.opentile = value;
}
$scope.change_tile(0);
Css looks like this.
.expander{
visibility: hidden
}
.close{
visibility: visible
}
Is possible add a second captions block?
We like anoter div allowing texts with css styles under the principal captions. How we can add this new field on the .js? The css styling is easy, but we dont know how add this new field.
This code doing same thing may be it will help you.
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://fotorama.s3.amazonaws.com/i/nyc/">
<!-- Fotorama -->
<div class="fotorama" data-width="100%" data-ratio="500/333" data-fit="cover" data-nav="false" data-auto="false">
<img src="http://fotorama.s3.amazonaws.com/i/nyc/streetlook.jpg" data-author="Alexei Lebedev" data-title="Streetlook" />
<img src="http://fotorama.s3.amazonaws.com/i/okonechnikov/1-lo.jpg" data-author="Andrey Okonechnikov" data-title="Alpen Fog" />
</div>
<p class="fotorama-caption"></p>
js code
$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
'<strong>' + activeFrame.title + '</strong><br>'
+ activeFrame.author
);
})
.fotorama();
demo jsffidle
I would suggest using "custom HTML" block for that:
http://fotorama.io/customize/html/#selectable-text
This way you could put anything inside your slide.
Can you only rearrange the source order for entire columns, or is it possible to rearrange a content block out of a column on a mobile view?
I'm working with Foundation 3 and am trying to change the source order of certain content on mobile. I understand from the docs how push-#-mobile and pull-#-mobile work, but need to do something a bit different.
We have a two column desktop layout: .eight.column for main content and .four.column for a sidebar. In mobile the sidebar appears below the main content as intended.
However, there is an within the .four.column sidebar that I need to display above the main content .eight.column in mobile view. The other blocks in the sidebar should still appear below the main content.
One suggestion a colleague had was to make a duplicate content block above the main content that is hide-for-large and make the sidebar hide-for-small. I hope there is a better option with Foundation that doesn't make me repeat code.
Here is a code snippet for what we currently have:
<section class="eight column">
<article>main content</article>
</section>
<aside class="sidebar four column">
<article>Some content</article>
<article class="first-in-mobile"> This should be above the main content in mobile view
</article>
<article>Some more content</article>
</aside>
Basically, does Foundation 3 provide a way for me to break the out of its parent column and display it in a different place in mobile view? Any suggestions for workarounds?
No there is no out-of-the-box way of doing it. And your colleague's suggestion is the right way of doing it. But I understand it's not the best especially if you have large contents in that area you want to move. But you can move it, instead of duplicating it. You can do it either by css or jquery. I prefer the latter for your specific scenario:
The layout
<div class="row" id="mainPh">
<div class="large-8 columns" id="mainContent">
<h1>Main content</h1>
</div>
<div class="large-4 columns" id="sidebar">
<div class="panel" id="firstSidebar">
<p>Some content</p>
</div>
<div class="panel" id="mobiMiddle">
<p>Middle content</p>
</div>
<div class="panel">
<p>Some more content</p>
</div>
</div>
</div>
The script
<script type="text/javascript">
var mainContent = $("#mainContent");
var sidebar = $("#sidebar");
var mobiMiddle = $("#mobiMiddle");
var mainPh = $("#mainPh");
var firstSidebar = $("#firstSidebar");
$(document).foundation();
$(document).ready(function () {
});
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
mainPh.prepend(mobiMiddle.detach());
}
else {
firstSidebar.after(mobiMiddle.detach());
}
});
</script>
You can change 768 to the size of device you are targeting.