Website Template JAnderson - Item Support

Hello CESARALBAS,

You can open the video in a popup window.
To do this, you need to add initialization in general.js. I do it like this:

// Change this (from '.portfolio-item')
$('.portfolio-item-image').magnificPopup({
type: 'image',
closeBtnInside: true,
mainClass: 'mfp-with-zoom'
});

// Add this
$('.portfolio-item-video').magnificPopup({
type: 'iframe',
closeBtnInside: true,
mainClass: 'mfp-with-zoom'
});

In this case, you also need to add classes (portfolio-item-image or portfolio-item-video) to the element "div" as follows and change "href" attribute:

Before:
<a href="IMAGE_LINK" class="portfolio-item watch">

After:

--- for image
<a href="IMAGE_LINK" class="portfolio-item portfolio-item-image watch">

--- for video
<a href="https://www.youtube.com/watch?v=VIDEO" class="portfolio-item portfolio-item-video video">

As an example, you can take mine, located on the demo link to the template, but instead "index.html" select "index-w-video.html".

Thank You,
Warm Regards,
Valery

P.S. link to demo page:
http://vtdes.ru/demo/janderson/index-w-video.html

Hello CESARALBAS,

To place the text you need to initialize the magnific (general.js) followed by the parameter "titleSrc":

$('.portfolio-item-image').magnificPopup({
type: 'image',
closeBtnInside: true,

titleSrc: 'title', // Add this

mainClass: 'mfp-with-zoom'
});

You also need to add an attribute "title" (titleSrc parameter in init, you can change it) to the link to the item:

<a href="IMAGE" class="portfolio-item portfolio-item-image cities" title="Portfolio image 1">

After that you need to add styles for the text element (class "mfp-title"). As an example, I did this:

<style>
.mfp-title {
position: relative;
top: -52px;
padding: 15px;
color: #fff;
font-weight: 300;
font-size: 24px;
font-family: "Open Sans Condensed",sans-serif;
background: rgba(255, 85, 85, 0.9);
}
</style>

link to demo page:
http://vtdes.ru/demo/janderson/index-w-video.html

Thank You,
Warm Regards,
Valery

Hello CESARALBAS,

The code for this element you can find in the file "theme.css" (section "Responsive" near the end of file). However, these options will only be used on the screens whose width is less than 1201 pixels and more than 991.

Initially, the size of the previously installed file (line 887):

.portfolio-item {
...
width: 267px;
height: 178px;
...
}

Thank You,
Warm Regards,
Valery

Hello CESARALBAS,

The easiest way - to use a trigger. After initialization add this string:

$('[data-filter=".cities"]').trigger('click')

Hello CESARALBAS,

You can overload the filter "*" or write a new filter. The implementation of this approach is shown below (general.js):

var $portfolio = $('.portfolio');

$portfolio.isotope({
itemSelector: '.portfolio-item',
layoutMode : 'masonry',
masonry : {
columnWidth: '.portfolio-item'
}
});

var cnt_elements = 0,
max_elements = 4;

var filterFns = {
'*-lim': function() {
return ++cnt_elements <= max_elements;
}
}

$('.portfolio-filter-button').click(function() {

var $this = $(this),
filter = $this.attr('data-filter');

if (filter == '*-lim') {
cnt_elements = 0;
filter = filterFns['*-lim'];
}

$('.portfolio-filter-button-active').removeClass('portfolio-filter-button-active');
$this.addClass('portfolio-filter-button-active');

$portfolio.isotope({
filter: filter,
animationOptions: {
duration: 750,
queue: false
}
});
});

On the demo page, you can see the new filter "Lim (4)".
data-filter attribute of this button is set to "*-lim".

Thank You,
Warm Regards,
Valery

Hello CESARALBAS,

I replied to you below:)

Hello CESARALBAS,

My answer to both comments.
| Hello, sorry but I've put the code in the "general.js" but it doesn't work.

You can set filters based on limitations on the number of elements.

For all elements you can use
filter: ':nth-child(-n+3)'
or
function() {
return $(this).index() < 3;
}

For filtered elements (full initialization block):

var $portfolio = $('.portfolio');

$portfolio.isotope({
itemSelector: '.portfolio-item',
layoutMode : 'masonry',
masonry : {
columnWidth: '.portfolio-item'
}
});

var cnt_elements = 0,
max_elements = 3;

$('.portfolio-filter-button').click(function() {

var $this = $(this),
filter = $this.attr('data-filter');

// Find all elements (itemSelector property)
if (filter == '*') filter = '.portfolio-item';

// "Hide" all elements
$portfolio.find('.portfolio-item').removeClass('filtered');

// Find and limit
cnt_elements = 0;
$portfolio.find(filter).each(function() {
if (++cnt_elements <= max_elements) $(this).addClass('filtered');
});


$('.portfolio-filter-button-active').removeClass('portfolio-filter-button-active');
$this.addClass('portfolio-filter-button-active');

$portfolio.isotope({
filter: '.filtered',
animationOptions: {
duration: 750,
queue: false
}
});
});


If you have any problems, please send me the address of your site in the mail, be sure to take a look and answer.

Thank You,
Warm Regards,
Valery

Hello CESARALBAS,

Add video instead of the main image is very simple.
Here is an example of how this can be done:


Place this ntml code in section "header":

<div class="video-wrapper">
<video class="video-home" autoplay muted loop>
<source src="videos/space.mp4" type="video/mp4">
<source src="videos/space.webm" type="video/webm">
</video>
</div>

... And just add style any way you like:

<style>
.video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
</style>

Video is presented here in two formats: .mp4 and .webm.
You can use any free service on the Internet to convert your video.

Example you can see the link
http://vtdes.ru/demo/janderson/index-w-video.html

Thank You,
Warm Regards,
Valery