Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 2, 2018 at 4:12 am #906588
    philscan

    I have a portfolio grid that has a lot of items maybe more than a hundred and I am showing it without pagination, I’d like to have number label inside the images that could serve as guide when browing that page. How can I achieve this with Enfold? Thanks in advance.

    February 3, 2018 at 11:28 pm #907306
    Basilis

    Hey philscan,

    You can use a ::before or ::after CSS rule, so you can check and add a number inside, but how would that number been generated?

    Best regards,
    Basilis

    February 5, 2018 at 5:18 am #907696
    philscan

    Hello,

    Thanks to your response, I was able to generate the number dynamically by using .attr and use it as my CSS content value for the pseudo element.

    Here’s the JS/jQuery code I use:

    jQuery(document).ready(function($){
	var num = 0;
	$(.post-entry-521 .grid-sort-container .post-entry").each(function(){
		num +=1;
		$(this).attr('data-number',num);
	});
});

    And the CSS for the ::before

    .post-entry-521 .grid-sort-container .post-entry::before {
    content: attr(data-number);
}

    Hope this help somebody in the future.

    • This reply was modified 6 years, 8 months ago by philscan.
    February 5, 2018 at 6:46 am #907760
    Nikko

    Hi philscan,

    Thanks for sharing the solution that worked for you :) We really appreciate it.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.