%PDF-
%PDF-
Mini Shell
Mini Shell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TAAM IGM</title>
<link rel="shortcut icon" href="imgs/logo-taam-4k-2vs.png" type="image/x-icon" />
<link rel="apple-touch-icon" href="imgs/logo-taam-4k-2vs.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!--INTEGRA2-->
<script src='https://code.jquery.com/jquery-3.4.1.min.js' type='text/javascript'></script>
<script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=header&aut=tjamich.gob.mx" type="text/javascript"></script>
</head>
<body>
<style>
.subtitulo-igm {
font-size: 27px;
font-weight: bold;
background: linear-gradient(to right, #8D85B0, #ff96f1); /* 🎨 Degradado */
-webkit-background-clip: text; /* Aplica el fondo al texto */
-webkit-text-fill-color: transparent; /* Hace transparente el relleno del texto */
}
.container-titulo-igm {
overflow: visible;
padding: 20px 0;
}
.titulo-igm {
font-size: 55px; /* tamaño grande */
font-weight: bold;
line-height: 1.2;
background: linear-gradient(to right, #8D85B0, #ff96f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.igm-slider {
display: flex;
flex-wrap: wrap; /* permite que los videos salten a otra línea si no caben */
gap: 20px; /* separación entre videos */
justify-content: center;
}
.lightbox {
display: none; /* importante: oculto por defecto */
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
flex-direction: row;
}
.lightbox-content {
max-width: 90%;
max-height: 80%;
border-radius: 8px;
object-fit: contain;
}
.close-btn {
position: fixed;
top: 20px;
right: 35px;
background: none;
border: none;
color: white;
font-size: 50px;
cursor: pointer;
z-index: 100001;
}
.arrow-btn {
position: fixed;
top: 50%;
background: none;
border: none;
color: white;
font-size: 50px;
cursor: pointer;
z-index: 100001;
transform: translateY(-50%);
}
#prevBtn { left: 20px; }
#nextBtn { right: 20px; }
.close-btn:hover,
.arrow-btn:hover { color: #bbb; }
.row-nuevo {
display: flex;
flex-wrap: wrap; /* si la pantalla es chica, bajan */
gap: 15px; /* espacio entre los videos */
justify-content: center; /* centrar contenido */
}
.container-iframe-igm {
flex: 1 1 30%; /* cada video ocupa aprox 1/3 del ancho */
max-width: 30%;
}
.igm-video-iframe {
width: 100%;
height: 250px; /* puedes ajustar altura */
border-radius: 8px; /* bordes redondeados opcionales */
}
.process-image strong {
color: #E6139E;
/*text-transform: uppercase;*/
font-family: "Trebuchet MS", Verdana, sans-serif !important;
}
.container-banner-defensorias2 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
cursor: pointer;
}
.banner-defensorias2 {
width: 1000px !important;
height: auto !important;
display: block;
}
.img-redondeada {
border-radius: 10px;
}
/* Efecto al pasar el mouse */
.container-banner-defensorias2:hover .banner-defensorias2 {
transform: scale(1.03);
}
</style>
<script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=body&aut=tjamich.gob.mx" type="text/javascript"></script>
<?php
require("conn.php");
$error = "";
?>
<div class="container-top-cmasc" id="topbar">
<div class="container-logo-top-cmasc">
<img class="logo-top-cmasc" src="imgs/logo-taam-4k.png" alt="">
</div>
<div class="container-href-cmasc">
<p class="href-cmasc" onclick="window.open('https://portal.tjamich.gob.mx/Tribunal-en-Materia-Anticorrupci%C3%B3n-y-Administrativa-de-Michoacan-de-Ocampo', '_blank')">Ir al sitio oficial principal</p>
</div>
</div>
<nav class="cmasc-navbar" role="navigation" aria-label="Menú principal" id="navbar">
<div class="cmasc-logo">
<img class="cmasc-logo-img" src="imgs/logo_genero.png" alt="Logo CMASC">
</div>
<div class="cmasc-toggle" id="cmasc-toggle" aria-label="Abrir menú" aria-expanded="false">
<span class="cmasc-toggle-bar"></span>
<span class="cmasc-toggle-bar"></span>
<span class="cmasc-toggle-bar"></span>
</div>
<ul class="cmasc-nav-links" id="cmasc-nav">
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#">Inicio</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#cursos">Cursos</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#sobrelacomision">Sobre el comité</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#revistagenero">Revista "Justicia y Género"</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#videosyoutube">Voces de Juzgadoras</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#actividades">Actividades</a></li>
<li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#contactodire">Contacto</a></li>
</ul>
</nav>
<div class="container-titulo-igm" >
<p class="titulo-igm">Comisión para la Igualdad de Género</p>
</div>
<br><br>
<br><br>
<div class="carousel-container" >
<?php
$sql = "SELECT id_noticia as id, fecha2 as fecha, fecha as fechae, titulo, imagen1, 'N' as tipo FROM noticias WHERE categoria = 'Equidad de Genero' ORDER BY fecha DESC limit 5";
/*$sql = "SELECT id_noticia as id, fecha, titulo, imagen1, 'N' as tipo from noticias where destacado = '1' order by id_noticia DESC limit 5";*/
$resportada = mysqli_query($conn, $sql);
// Obtenemos todos los resultados en un array
$noticias = mysqli_fetch_all($resportada, MYSQLI_ASSOC);
// Número total de registros
$total = count($noticias);
for ($i = 0; $i < $total; $i++) {
$portada_id_noticia = $noticias[$i]['id'];
$portada_titulo = $noticias[$i]['titulo'];
$portada_imagen = $noticias[$i]['imagen1'];
$tipo = $noticias[$i]['tipo'];
$contador = $i +1;
echo "<div class=\"mySlides animate\">";
echo"<img src=\"https://portal.tjamich.gob.mx/img/noticias/$portada_imagen\" alt=\"$portada_titulo\" />";
echo "<div class=\"number\">$contador / $total</div> </div>";
}
?>
<!--<div class="mySlides animate">
<img src="https://portal.tjamich.gob.mx/Igualdad-de-Genero/img-tjam/portada_comite.png" alt="slide" />
<div class="number">1 / 5</div>
</div>
<div class="mySlides animate">
<img src="https://portal.tjamich.gob.mx/img/noticias/686_PORTADA%2026%20de%20enero%20de%202023.png" alt="slide" />
<div class="number">2 / 5</div>
</div>
<div class="mySlides animate">
<img src="https://portal.tjamich.gob.mx/Igualdad-de-Genero/img-tjam/Portada_2_ep_3.png" alt="slide" />
<div class="number">3 / 5</div>
</div>
<div class="mySlides animate">
<img src="https://portal.tjamich.gob.mx/img/noticias/701_118_CIG_PORTADA%2001%20de%20septiembre%20de%202022.png" alt="slide" />
<div class="number">4 / 5</div>
</div>
<div class="mySlides animate">
<img src="https://portal.tjamich.gob.mx/img/noticias/18_PORTADA%2013%20de%20febrero%20de%202023.png" alt="slide" />
<div class="number">5 / 5</div>
</div>-->
<!-- Next and previous buttons -->
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
<!-- The dots/circles -->
<div class="dots-container">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
<span class="dots" onclick="currentSlide(5)"></span>
</div>
</div>
<br><br><br>
<div class="container-subtitulo-igm" id="cursos">
<br>
<p class="subtitulo-igm">Cursos</p>
<div class="container-banner-defensorias2" onclick="window.open('imgs/FORMACION EN LINEA SOBRE PERSPECTIVA DE GENERO.pdf', '_blank')">
<img class="banner-defensorias2 img-redondeada" src="imgs/BannerIgualdad.png" alt="">
</div>
<br>
<div class="container-banner-defensorias2" >
<img class="banner-defensorias2 img-redondeada" src="imgs/nuevas_masculinidades.jpg" alt="">
</div>
</div>
<div class="container-subtitulo-igm" >
<p class="subtitulo-igm">Sobre el Comite</p>
</div>
<?
include 'apartado.php';
?>
<br><br>
<div class="container-subtitulo-igm" id="revistagenero">
<p class="subtitulo-igm">Revista "Justicia y Género"</p>
</div>
<div class="cmasc-revistas" >
<div class="container-revista-cmasc" >
<div class="cmasc-revista" onclick="window.open('https://portal.tjamich.gob.mx/Igualdad-de-Genero/revistas/revista2/index.html', '_blank')">
<div class="cmasc-fondo"></div>
<img src="imgs/478_Revista2.jpg" alt="Revista 1">
</div>
<p class="titulo-revista">Edición 2</p>
</div>
<div class="container-revista-cmasc">
<div class="cmasc-revista" onclick="window.open('https://portal.tjamich.gob.mx/Igualdad-de-Genero/revistas/revista1/index.html', '_blank')">
<div class="cmasc-fondo"></div>
<img src="imgs/11_portada1.jpg" alt="Revista 2">
</div>
<p class="titulo-revista">Edición 1</p>
</div>
</div>
<div class="container-subtitulo-igm" id="videosyoutube">
<p class="subtitulo-igm">Voces de Juzgadoras</p>
</div>
<div class="gallery-5" id="igm-slider" >
<div class = "row-nuevo">
<div class="container-iframe-igm">
<iframe class="igm-video-iframe" src="https://www.youtube.com/embed/dPHxGBtgmmQ?si=QNS_WdTD-VjY8tMp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="container-iframe-igm">
<iframe class="igm-video-iframe" src="https://www.youtube.com/embed/SfRPbiP5jt4?si=SzIcuw-V1tEeRUwm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div class="container-iframe-igm">
<iframe class="igm-video-iframe" src="https://www.youtube.com/embed/G3x82LCzTCg?si=abh3X6zxLqxC3CsX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container-servicios-igm" style="display: none;">
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/logo-igualdad-genero-mujeres.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Sobre la Comisión</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/microfono.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Voces de Juzgadoras</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/juicio.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Sentencias del Tribunal</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/conversacion.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">En la Opinión de...</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/calendario.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Fechas Importantes</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/libro.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Normatividad</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/signo-de-interrogacion.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">¿Sabías Qué?</p>
</div>
</div>
<div class="container-op-igm">
<div class="container-icon-igm">
<img class="icon-igm" src="imgs/mujer.png" alt="">
</div>
<div class="container-text-igm">
<p class="text-igm">Mujeres Destacadas</p>
</div>
</div>
</div>
<!-- Lightbox -->
<div id="lightbox" class="lightbox">
<button id="prevBtn" class="arrow-btn">❮</button>
<img id="lightbox-img" class="lightbox-content" src="">
<button id="nextBtn" class="arrow-btn">❯</button>
<button id="closeLightbox" class="close-btn">×</button>
</div>
<div class="gallery-5" >
<div class="container-subtitulo-igm" id="actividades">
<p class="subtitulo-igm">Actividades</p>
</div>
<br>
<!--<div class="gallery-row">
<!-- Columna izquierda -->
<!--<div class="gallery-col left">
<div class="gallery-img large" data-aos="fade-up">
<img src="imgs/igm-1.jpg" alt="img1">
</div>
<div class="gallery-img-row">
<div class="gallery-img small" data-aos="fade-down">
<img src="imgs/igm-2.jpg" alt="img2">
</div>
<div class="gallery-img small" data-aos="fade-down">
<img src="imgs/igm-3.jpg" alt="img3">
</div>
</div>
</div>-->
<!-- Columna derecha -->
<!--<div class="gallery-col right">
<div class="gallery-img-row">
<div class="gallery-img small" data-aos="fade-right">
<img src="imgs/igm-4.jpg" alt="img4">
</div>
<div class="gallery-img small" data-aos="fade-left">
<img src="imgs/igm-5.jpg" alt="img5">
</div>
</div>
</div>
</div>-->
<div class="row">
<?php
$sql = "SELECT * FROM genero_actividades ORDER BY id_actividad DESC limit 6";
$resportada = mysqli_query($conn, $sql);
// Obtenemos todos los resultados en un array
$noticias = mysqli_fetch_all($resportada, MYSQLI_ASSOC);
// Número total de registros
$total = count($noticias);
for ($i = 0; $i < $total; $i++) {
$actividad_id = $noticias[$i]['id_actividad'];
$nombre_actividad = utf8_encode($noticias[$i]['nombre']);
$url_foto = utf8_encode($noticias[$i]['url_foto']);
echo "<figure class=\"col-md-4\">
<a class=\"black-text open-lightbox\" href=\"#\" data-id=\"$actividad_id\" data-large=\"$url_foto\" style=\"display:inline-block;\">
<img style=\"width:500px; height:600px; object-fit:cover; display:block;\" class=\"img-thumbnail\" src=\"$url_foto \" alt=\"img\">
<h6 style=\"max-width:500px; margin-top:8px; word-wrap:break-word; white-space:normal;\">$nombre_actividad</h6>
</a>
</figure>";
}
?>
</div>
</div>
<footer class="footer-general" id="contactodire">
<div class="container-igm-footer">
<div class="container-info" >
<div class="container-img-footer">
<img class="cmasc-logo-footer" src="imgs/logo-taam-4k-2vs.png" alt="">
</div>
</div>
<div class="container-info">
<div class="container-contactos">
<h1 class="cmasc-tit-footer">Morelia</h1>
<ul class="cmasc-lista">
<li class="cmasc-item">
<i class="fa fa-map-marker cmasc-icono"></i> Av. Francisco I. Madero # 1622, 58190 Morelia, Michoacán.
</li>
</ul>
<h4 class="cmasc-sub-footer">Salas</h4>
<ul class="cmasc-lista">
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 316-1459
</li>
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 315-2740
</li>
</ul>
<h4 class="cmasc-sub-footer">Juzgados Administrativos</h4>
<ul class="cmasc-lista">
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 315-2726
</li>
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 315-2762
</li>
</ul>
</div>
</div>
<div class="container-info">
<div class="container-contactos">
<h2 class="cmasc-tit-footer">Uruapan</h2>
<ul class="cmasc-lista">
<li class="cmasc-item">
<i class="fa fa-map-marker cmasc-icono"></i> Gran Parada 380, esquina con Galeana, 60080 Uruapan, Michoacán.
</li>
</ul>
<h4 class="cmasc-sub-footer">Juzgado Administrativo</h4>
<ul class="cmasc-lista">
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 315-2726
</li>
<li class="cmasc-item">
<i class="fa-solid fa-phone cmasc-icono"></i> Tel: (443) 315-2762
</li>
</ul>
</div>
</div>
<div class="container-info-redes">
<div class="container-redes">
<a href="https://twitter.com/TJAMich" target="_blank" title="Twitter"><i class="fa-brands fa-x-twitter"></i></a>
</div>
<div class="container-redes">
<a href="https://www.youtube.com/channel/UCPK3sqK1k4vPMzc2NfEP-vA/videos" target="_blank" title="YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>
<div class="container-redes">
<a href="https://www.facebook.com/tjamich" target="_blank" title="Facebook"><i class="fa-brands fa-facebook"></i></a>
</div>
</div>
<div class="container-info" >
<div class="container-img-footer">
<img class="cmasc-logo-footer" src="imgs/logo_genero.png" alt="">
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
<script src="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.js"></script>
<script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=footer&aut=tjamich.gob.mx" type="text/javascript"></script>
</body>
<script>
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const closeBtn = document.getElementById('closeLightbox');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
let fotos = [];
let indice = 0;
document.querySelectorAll('.open-lightbox').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const actividadId = link.dataset.id;
const principal = link.dataset.large;
fetch(`getGaleria.php?id_actividad=${actividadId}`)
.then(res => res.json())
.then(data => {
fotos = [];
if(principal) fotos.push(principal);
if(Array.isArray(data) && data.length > 0) {
data.forEach(f => {
if(f.url_foto && f.url_foto !== principal) fotos.push(f.url_foto);
});
}
if(fotos.length === 0){
// si no hay fotos, solo no abrir nada
return;
}
indice = 0;
lightboxImg.src = fotos[indice];
lightbox.style.display = 'flex';
document.body.style.overflow = 'hidden';
// Mostrar u ocultar flechas
if(fotos.length > 1){
nextBtn.style.display = 'block';
prevBtn.style.display = 'block';
} else {
nextBtn.style.display = 'none';
prevBtn.style.display = 'none';
}
})
.catch(err => console.error(err));
});
});
// Navegación
nextBtn.addEventListener('click', e => {
e.stopPropagation();
indice = (indice + 1) % fotos.length;
lightboxImg.src = fotos[indice];
});
prevBtn.addEventListener('click', e => {
e.stopPropagation();
indice = (indice - 1 + fotos.length) % fotos.length;
lightboxImg.src = fotos[indice];
});
// Cerrar lightbox
function cerrarLightbox() {
lightbox.style.display = 'none';
document.body.style.overflow = 'auto';
}
closeBtn.addEventListener('click', cerrarLightbox);
lightbox.addEventListener('click', e => {
if(e.target === lightbox) cerrarLightbox();
});
let modalId = $('#image-gallery');
$(document)
.ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image')
.show();
if (counter_max === counter_current) {
$('#show-next-image')
.hide();
} else if (counter_current === 1) {
$('#show-previous-image')
.hide();
}
}
/**
*
* @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
* @param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr) {
let current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image')
.click(function () {
if ($(this)
.attr('id') === 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
let $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-title')
.text($sel.data('title'));
$('#image-gallery-image')
.attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]')
.each(function () {
counter++;
$(this)
.attr('data-image-id', counter);
});
}
$(setClickAttr)
.on('click', function () {
updateGallery($(this));
});
}
});
// build key actions
$(document)
.keydown(function (e) {
switch (e.which) {
case 37: // left
if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
$('#show-previous-image')
.click();
}
break;
case 39: // right
if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
$('#show-next-image')
.click();
}
break;
default:
return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
</script>
</html>
Zerion Mini Shell 1.0