Vertical Image Carousel - Web Squadron

PHOTO

Mon Sep 29 2025 20:00:52 GMT+0000 (Coordinated Universal Time)

Saved by @emalbert #php #wordpress #elementor

<style>
  .down, .up {
    --column-height: 500px;
    --image-height: 200px;
    --row-gap: 10px;
    --num-images: 5;

    height: var(--column-height);
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
  }

  .scroll-container {
    display: flex;
    flex-direction: column;
  }

  .up .scroll-container {
    animation: imagescrolling 15s linear infinite alternate;
    animation-delay: -0.1s; /* Offset to ensure it starts halfway through the cycle */
  }

  .down .scroll-container {
    animation: imagescrolling2 15s linear infinite alternate;
  }

  .scroll-container img {
    height: var(--image-height);
    width: 100%;
    margin-bottom: var(--row-gap);
    padding: 0;
    object-fit: cover;
  }

  @keyframes imagescrolling {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(
        -1 * (((var(--image-height) + var(--row-gap)) * var(--num-images)) - var(--column-height))
      ));
    }
  }

  @keyframes imagescrolling2 {
    0% {
      transform: translateY(calc(
        -1 * (((var(--image-height) + var(--row-gap)) * var(--num-images)) - var(--column-height))
      ));
    }
    100% {
      transform: translateY(0);
    }
  }
</style>

https://www.youtube.com/watch?v=LEEgL8DxHUI

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Wordpress

@emalbert

Mostrar un menú de WordPress con un Shortcode | Rubén Veliz Cómo cambiar el texto "Añadir al carrito" en la página de Producto @ Ayuda WordPress⁤ Cómo cambiar el texto "Añadir al carrito" en el Archivo de Productos @ Ayuda WordPress⁤ Cómo cambiar el texto "Añadir al carrito" por Tipo de Producto en el Archivo de Productos @ Ayuda WordPress⁤ Cómo cambiar el texto "Añadir al carrito" por Categorías @ Ayuda WordPress⁤ animated-nav-to-cross - Alternative Menu for Wordpress Mobile Tabs At Top Of Nested Tabs - Elementor Vertical Image Carousel - Web Squadron

How to get closest date compared to an array of dates in PHP

<?php
    $dates = array
    (
        '0' => "2013-02-18 05:14:54",
        '1' => "2013-02-12 01:44:03",
        '2' => "2013-02-05 16:25:07",
        '3' => "2013-01-29 02:00:15",
        '4' => "2013-01-27 18:33:45"
    );

    function closest($dates, $findate)
    {
        $newDates = array();

        foreach($dates as $date)
        {
            $newDates[] = strtotime($date);
        }

        echo "<pre>";
        print_r($newDates);
        echo "</pre>";

        sort($newDates);
        foreach ($newDates as $a)
        {
            if ($a >= strtotime($findate))
                return $a;
        }
        return end($newDates);
    }

    $values = closest($dates, date('2013-02-04 14:11:16'));
    echo date('Y-m-d h:i:s', $values);
?>

Elementor Form Block Eric Jones Email Spam

//// Validate if Email field is spam
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
    // Looking if email found in spam array, you can add to the array
  $spamemails = array("ericjonesonline@outlook.com", "eric@talkwithwebvisitor.com");
    if ( in_array( $field['value'] , $spamemails) ) {
        $ajax_handler->add_error( $field['id'], 'אנחנו לא אוהבים ספאם, נסו מייל אחר' );
    }
}, 10, 3 );

#php #interesting #interviewquestions #logic

Code to count numbers on your fingers

<?php 
function count_num_finger( $n ) 
{ 
	$r = $n % 8; 
	if ($r == 1) 
		return $r; 
	if ($r == 5) 
		return $r; 
	if ($r == 0 or $r == 2) 
		return 2; 
	if ($r == 3 or $r == 7) 
		return 3; 
	if ($r == 4 or $r == 6) 
		return 4; 
}	 

// Driver Code 
$n = 30; 
echo(count_num_finger($n)); 
 
?>

#php #interviewquestions #makethisbetter

How to find the nth Magic Number?

<?php 
// PHP program to find nth 
// magic number 

// Function to find nth 
// magic number 
function nthMagicNo($n) 
{ 
	$pow = 1; 
	$answer = 0; 

	// Go through every bit of n 
	while ($n) 
	{ 
	$pow = $pow * 5; 

	// If last bit of n is set 
	if ($n & 1) 
		$answer += $pow; 

	// proceed to next bit 
	$n >>= 1; // or $n = $n/2 
	} 
	return $answer; 
} 

// Driver Code 
$n = 5; 
echo "nth magic number is ", 
	nthMagicNo($n), "\n"; 

// This code is contributed by Ajit. 
?>

WooCommerce - Disable Cash on delivery from a product ( based on ID)

add_filter( 'woocommerce_available_payment_gateways', 'conditionally_disable_cod_payment_method', 10, 1);
function conditionally_disable_cod_payment_method( $gateways ){
    // HERE define your Products IDs
    $products_ids = array(2880);

    // Loop through cart items
    foreach ( WC()->cart->get_cart() as $cart_item ){
        // Compatibility with WC 3+
        $product_id = version_compare( WC_VERSION, '3.0', '<' ) ? $cart_item['data']->id : $cart_item['data']->get_id();
        if (in_array( $cart_item['product_id'], $products_ids ) ){
            unset($gateways['cod']);
            break; // As "COD" is removed we stop the loop
        }
    }
    return $gateways;
}

How to Call a controller function in another Controller in Laravel 5

use App\Http\Controllers\OtherController;

class TestController extends Controller
{
    public function index()
    {
        //Calling a method that is from the OtherController
        $result = (new OtherController)->method();
    }
}

2) Second way

app('App\Http\Controllers\OtherController')->method();

Both way you can get another controller function.

#wordpress #php #stock #quantity #filter

Filter get_stock_quantity method for WooCommerce products

add_filter( 'woocommerce_product_get_stock_quantity' ,'custom_get_stock_quantity', 10, 2 );
add_filter( 'woocommerce_product_variation_get_stock_quantity' ,'custom_get_stock_quantity', 10, 2 );
function custom_get_stock_quantity( $value, $product ) {
    $value = 15; // <== Just for testing
    return $value;
}

#php #wordpress #elementor

Disable Eicons in Elementor

//*****---  Remove Eicons:  ---*****
//==========================
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

#elementor #wordpress #jquery

Closes Elementor Popup On Click (Paste it in an HTML widget)

<script>
jQuery( document ).ready(function($){
	$(document).on('click','.elementor-location-popup a', function(event){
		elementorProFrontend.modules.popup.closePopup( {}, event);
	})
});
</script>

#php #wordpress #elementor

Disable Font Awesome in Elementor

//******--- Remove Font Awesome ---*****
//===============================
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

Titlebar template for use with Avada Child theme that displays featured image as titlebar background

<?php
/**
 * Titlebar template.
 *
 * @author     ThemeFusion
 * @copyright  (c) Copyright by ThemeFusion
 * @link       https://theme-fusion.com
 * @package    Avada
 * @subpackage Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="fusion-page-title-bar fusion-page-title-bar-<?php echo esc_attr( $content_type ); ?> fusion-page-title-bar-<?php echo esc_attr( $alignment ); ?>" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center; ">
	<div class="fusion-page-title-row">
		<div class="fusion-page-title-wrapper">
			<div class="fusion-page-title-captions">

				<?php if ( $title ) : ?>
					<?php // Add entry-title for rich snippets. ?>
					<?php $entry_title_class = ( Avada()->settings->get( 'disable_date_rich_snippet_pages' ) && Avada()->settings->get( 'disable_rich_snippet_title' ) ) ? 'entry-title' : ''; ?>
					<h1 class="<?php echo esc_attr( $entry_title_class ); ?>"><?php echo $title; // phpcs:ignore WordPress.Security.EscapeOutput ?></h1>

					<?php if ( $subtitle ) : ?>
						<h3><?php echo $subtitle; // phpcs:ignore WordPress.Security.EscapeOutput ?></h3>
					<?php endif; ?>
				<?php endif; ?>

				<?php if ( 'center' === $alignment ) : // Render secondary content on center layout. ?>
					<?php if ( 'none' !== fusion_get_option( 'page_title_bar_bs' ) ) : ?>
						<div class="fusion-page-title-secondary">
							<?php echo $secondary_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
						</div>
					<?php endif; ?>
				<?php endif; ?>

			</div>

			<?php if ( 'center' !== $alignment ) : // Render secondary content on left/right layout. ?>
				<?php if ( 'none' !== fusion_get_option( 'page_title_bar_bs' ) ) : ?>
					<div class="fusion-page-title-secondary">
						<?php echo $secondary_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
					</div>
				<?php endif; ?>
			<?php endif; ?>

		</div>
	</div>
</div>

<?php
	session_start();
	
	$errorsArr = array();
	
	if(isset($_POST['submittedLogin'])){
		$username = $_POST['usernameLogin'];
		$password = $_POST['passwordLogin'];
		
		//ensure form fields are filled properly
		if(empty($username)){
			array_push($errorsArr, "Username is required! Please try again!");
		}
		if(empty($password)){
			array_push($errorsArr, "Password is required! Please try again!");
		}
		if((!empty($username)) && (!empty($password)) && ($username != 'admin') && ($password != 'admin')){
			array_push($errorsArr, "Incorrect username or password! Please try again!");
		}
		
		//no errors
		if(count($errorsArr) == 0){
			$_SESSION['username'] = $username;
			$_SESSION['success'] = "You are now logged in!";
			header('Location: /205CDE/Assignment/manageNews.php');
		}
	}
	
	//logout
	if(isset($_GET['logout'])){
		session_destroy();
		unset($_SESSION['username']);
		header('Location: /205CDE/Assignment/home.php');
	}
?>
<div class="container-fluid" style="background: #1f52a3;">
	<div class="row">
		<div class="col-2"></div>
		<div class="col-8">
			<a href="/205CDE/Assignment/home.php"><h1 style="text-align: center; color: #e6e8eb; margin: 20px 0;">U Chen Daily</h1></a>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center">
			<?php if(isset($_SESSION['username'])){ ?>
				<a href="/205CDE/Assignment/home.php?logout='1'" class="btn btn-outline-light">LOGOUT</a>
				<?php }else{ 
				?>
				<button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#loginFormModal">
					LOGIN AS ADMIN
				</button>
			<?php } ?>
			<!--<a href="/205CDE/Assignment/manageNews.php" target="_blank" class="btn btn-outline-light">LOGIN</a>-->
		</div>
	</div>
</div>
<!--login form modal START-->
<!-- Modal -->
<div class="modal fade" id="loginFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalCenterTitle">Login</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<form action="/205CDE/Assignment/home.php" method="post" id="loginModalForm">
				<div class="modal-body">
					<?php
						if(count($errorsArr) > 0){?>
						<div class="form-group">
							<?php
								foreach($errorsArr as $errorMsg){
									//echo "<p class=\"text-danger\">$errorMsg</p>";
									echo "<script>alert(\"$errorMsg\")</script>";
								}
							?>
						</div>
						<?php }
					?>
					<div class="form-group">
						<label for="exampleInputEmail1">Username</label>
						<input type="text" class="form-control" name="usernameLogin" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter username" value="<?php if(isset($username)){echo $username;} ?>">
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" name="passwordLogin" id="exampleInputPassword1" placeholder="Enter password">
					</div>
					<br>
					<div class="form-group">
						<button type="submit" class="btn btn-lg btn-block text-light" style="background: #1f52a3;">LOGIN</button>
						<input type="hidden" name="submittedLogin">
					</div>
				</div>
				<!--<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Login</button>
				</div>-->
			</form>
		</div>
	</div>
</div>
<!--login form modal END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="/205CDE/Assignment/home.php"><i class="fas fa-home" style="font-size: 30px; color: #1f52a3;"></i></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item dropdown" style="margin: 0 15px;">
				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
				<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<?php
						$newsCategoryArr = array(
						'All', 'Nation', 'World',
						'Sport', 'Entertainment',
						);
						foreach($newsCategoryArr as $newsType){
							echo "<a class=\"dropdown-item\" href=\"/205CDE/Assignment/news$newsType.php\" target=\"_blank\">$newsType</a>";
						}
					?>
				</div>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/aboutUs.php" target="_blank">About Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/contactUs.php" target="_blank">Contact Us</a>
			</li>
			<li class="nav-item" style="margin: 0 15px;">
				<a class="nav-link" href="/205CDE/Assignment/faqs.php" target="_blank">FAQs</a>
			</li>
			<!-- <li class="nav-item"> -->
			<!-- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> -->
			<!-- </li> -->
		</ul>
		<!-- <form class="form-inline my-2 my-lg-0"> -->
		<!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> -->
		<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
		<!-- </form> -->
	</div>
</nav>

CMB2/CMB2 - Display the Metadata

<?php
// Grab the metadata from the database
$text = get_post_meta( get_the_ID(), 'yourprefix_text', true );

// Echo the metadata
echo esc_html( $text );
?>

#php #wordpress #woocomerce

Search by SKU function

function search_by_sku( $search, &$query_vars ) {
    global $wpdb;
    if(isset($query_vars->query['s']) && !empty($query_vars->query['s'])){
        $args = array(
            'posts_per_page'  => -1,
            'post_type'       => 'product',
            'meta_query' => array(
                array(
                    'key' => '_sku',
                    'value' => $query_vars->query['s'],
                    'compare' => 'LIKE'
                )
            )
        );
        $posts = get_posts($args);
        if(empty($posts)) return $search;
        $get_post_ids = array();
        foreach($posts as $post){
            $get_post_ids[] = $post->ID;
        }
        if(sizeof( $get_post_ids ) > 0 ) {
                $search = str_replace( 'AND (((', "AND ((({$wpdb->posts}.ID IN (" . implode( ',', $get_post_ids ) . ")) OR (", $search);
        }
    }
    return $search;
    
}
    add_filter( 'posts_search', 'search_by_sku', 999, 2 );

#php #wordpress

Creates a shortlink for Wordpress

/***** Shorten Post/Page link  *****/
//============================
add_filter( 'get_shortlink', function ( $shortlink ) {
    return $shortlink;
});

Browse more snippets >>