Portfolio Section Frame/Paralax Video

Michael
Offline
Last seen: 2 years 9 months ago
Tue, 08/19/2014 - 13:04
#1
Portfolio Section Frame/Paralax Video

Hello,

1. I instead of having the work link to a nested html file, I am having the thumbnails of each portfolio piece open a new tab to go to my behance.net page for each respective portfolio piece.

http://imgur.com/TscTrue

The problem im having is once I click a thumbnail, the little 'x' that is used to close the nested html file appears, I don't want it to.

http://imgur.com/9n3NBYP

What do I have to do in order to not have that little 'x' pop up when the user clicks the thumbnail?

2. I want to add a video background like .html3 has behind the 'newsletter' section. I want to add my video to my 'fun facts' section

http://imgur.com/lDpBWcC- I want to put a video like you have in your demo here

http://imgur.com/W15lZqS - my site

http://imgur.com/mVv5UWY- my code

cindy
cindy's picture
Offline
Last seen: 3 days 6 hours ago
Wed, 08/20/2014 - 17:32

Hi,
We are working on your issue and will feedback you asap!

Regards,

cindy
cindy's picture
Offline
Last seen: 3 days 6 hours ago
Thu, 08/21/2014 - 10:21

Hi,
1.
In index.html, please replace ajax-section with the following one:

<div id="ajax-section">

<!-- AJAX CONTENT -->
<div id="ajax-content-outer">
<div id="ajax-content-inner"></div>
</div>
<!-- END AJAX CONTENT -->

<!-- LOADER -->
<div id="loader"></div>
<!-- END / LOADER -->

<div id="project-navigation">
<!-- Close -->
<div id="closeProject"><a href="#loader" title="">close</a></div>
<!-- End / Close -->
</div>
</div>

And in file style.css, go to line 2668 - 2693 and replace #ajax-section with:

#ajax-section {
position: relative;
}
#ajax-section:after {
content: '';
display: block;
clear: both;
}
#closeProject {
position: absolute;
top: 58px;
text-align: center;
width: 100%;
margin: auto;
left: 0; right: 0;
}
#closeProject a {
font-size: 0;
color: transparent;
width: 18px; height: 16px;
background: url('images/w-close.png') no-repeat;
z-index: 999;
cursor: pointer;
}
#ajax-section #loader {
width: 100%;
height: 45px;
display: none;
position: absolute;
top: 200px;
background: url('images/loader.gif') center center no-repeat;
}

Copy the image loader.gif in file images and paste it into your own image file.

2. About the video in funfact section, just remove the background image, the video will automatically loaded because we use a video for the whole page

Michael
Offline
Last seen: 2 years 9 months ago
Thu, 08/21/2014 - 12:11

1. "Copy the image loader.gif in file images and paste it into your own image file." - I couldn't locate this file and I didn't quite understand what you mean by pasting it into my own image file

After following your code replacement sections above it worked however a new bug happened where the formatting of my portfolio broke. I had 4 rows of 2 projects instead of 2 rows of 4 projects.

Any idea what I did wrong?

My website is http://www.michaelperaza.com if you need to look at it. I reverted back to my original code because the error looked bad. Just an FYI the 'x' only appears when I have the link set to without the target=_blank" the 'x' doesn't appear.

2.Is there a way I can add a separate video to my fun fact section? I'd like to have a quick, shorter video for my fun facts area.

cindy
cindy's picture
Offline
Last seen: 3 days 6 hours ago
Thu, 08/21/2014 - 17:26

Hi,
To make the "x" disappear, just open file index.html and remove this code below (line 243-256)

<div class="row">
<div id="ajax-section" class="dark">

<!-- AJAX CONTENT -->
<div id="ajax-content-outer">
<div id="ajax-content-inner"></div>
</div>
<!-- END AJAX CONTENT -->

<!-- Close -->
<div id="closeProject"><a href="#loader" title="">close</a></div>
<!-- End / Close -->
</div>
</div>

Also, remove line 758
<script type="text/javascript" src="js/ajax-load-project.js"></script>
You need to delete file ajax-load-project.js in file js, too.

About the funfact video, of course you can add the video but you have to custom by yourself

Regards,
WPP Team

Michael
Offline
Last seen: 2 years 9 months ago
Tue, 09/02/2014 - 12:18

The video on this template sometimes doesn't autoplay when viewing from firefox. Is there anything I can do about this?

http://michaelperaza.com/

cindy
cindy's picture
Offline
Last seen: 3 days 6 hours ago
Wed, 09/03/2014 - 10:20

Hi,
In file index.html, from line 41 to 49 please replace with this following code:

<!-- Video fixed -->

<div id="video-fixed">
<div id="video-custom">
<a id="video" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=8zTukhpYrvo'}"></a>
</div>
</div>

<!-- End / Video fixed -->

File jquery.custom.js nằm trong thư mục js. sửa dòng 186 đến 187

$('#video').mb_YTPlayer({
containment: "#video-custom",
showControls:false,
autoPlay:true,
loop:true,
mute:true,
startAt:0,
opacity:1,
addRaster:false,
quality:'default',
showYTLogo: false,
showControls: false,
});

Log in or register to post comments