CivicIdeas Projects Show

With Media Attachments button via Fancybox

by Pete Fecteau

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/fancybox/bootstrap.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/fancybox/jquery.fancybox.pack.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/fancybox/jquery.fancybox-media.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/fancybox/jquery.fancybox-buttons.js"></script>
<div class="standard-nav alone navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home"><a href="#">Home</a></li>
                    <li class="nav-ideas"><a href="#">Ideas</a></li>
                    <li class="nav-projects active"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li class="language">
                        <div id="google_translate_element"></div>
                    </li>
                    <li>
                        <form class="navbar-search pull-left" action="">
                            <input type="text" class="search-query span2" placeholder="Search" />
                        </form>
                    </li>
                    <li class="dropdown">
                    <a href="/users/sign_in" id="navbar-login">Login or Register</a>
                    <ul class="dropdown-menu" id="swatch-menu">
                        <li><a href="../default">Log Out</a></li>
                        <li class="divider"></li>
                   ...

SCSS

@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap.css');
@import url('https://mozilla.github.io/pdf.js/web/viewer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-hdr.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-project.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-idea.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-discussion.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-forum.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-survey.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/widget-attach-media.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/fancybox/jquery.fancybox.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/fancybox/jquery.fancybox-buttons.css');
body {background:#DEDFE0;}
.span9 h3 {
    clear:both;
    width:100%;
    border-top:1px solid #dedfe0;
    margin-top:60px;
    padding-top:20px;
}
section.project {border:0;}
section.project .body {clear:left;}
section.project .body img {
    width:220px;
    float:left;
    clear:left;
    margin:0 20px 10px 0;
}
section[class|=attached] {
    border-bottom:1px solid #DEDFE0;
    padding:20px 0;
}
section[class|=attached]:first-child {padding-top:20px;}
section[class|=attached]:first-child,
section[class|=attached]:last-child {border:0;}
section[class|=attached] .meta {
    float:right;
    cursor:default;
}
section[class|=attached] .meta .btn {margin-top:-26px;}

JavaScript

$(".fancybox").fancybox({
    openEffect : 'none',
    closeEffect	: 'none',
    iframe : {preload: false},
    closeBtn : true,
    helpers	: {title : { type : 'inside' },buttons	: {}}
});