I have two css where each one gives a different action to the images, and what I want is to know if you can join the two in one line of code, or make another class where the mescle. one is zoom that the download deinternet is from zoomy.css this class makes that if I click on my image the magnifying effect of it appears.
the other effect, I do not know how to call it. what it does is that I have small images and when I click on it, a larger image of it will appear on the right.
What I want is to mix the effects, that is to say, first that the small images appear, I give it click, the big one appears and in that click and the magnifying effect comes out
<ul class="cat">
<li>
<a href="#">
<img class="min" src="../images/bici_noche.jpg" alt="#" />
<img class="max" src="../images/bici_noche.jpg" alt="#" />
</a>
</li>
<li>
<a href="#">
<?php echo '<img class="min" src="'.$imag1.'" >'; ?>
<div id="zoom"> <?php echo '<img class="max" src="'.$imag1.'" >'; ?>
</div></a>
</li>
</ul>
This my code, the first part is from the small images to the big one.
<?php echo '<a href="'.$imag1.'" class="zoom"><img src="'.$imag1.'" width="200" heigth="50"></a>'; ?>
this is the zoom
This is the style code of small to large
#contenedor {
width: 100%;
margin: 0 auto; }
li .min {
width: 150px;
height: 150px;
padding: 6px 20px 20px 7px;
}
li .max{
width: 350px;
height: 350px;
padding: 6px 20px 20px 70px;
}
.cat {
list-style-type: none;
margin: 0 0 25px 10px; /* Eliminacion de vieta en IE6 */
padding: 0px; /* Eliminacion de vieta en IE6 */
float:left;
}
.max{
visibility:hidden;
position: absolute;
top: 330px; /* Provoca la separacion del borde superior */
left: 15%; /* Separa la imagen grande de la pequea */
margin-left: 0px;
}
a:focus .max {
visibility: visible;
}
and this is from the zoomy
/*
* Zoomy 2.0.0 - jQuery plugin
* http://zoomy.me
*
* Copyright (c) 2010 Jacob Lowe (http://redeyeoperations.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
* Addition fixes and modifications done by Larry Battle ( [email protected] )
* Code has been refactored and the logic has been corrected.
*
*Cusor fix from IE by Chris Pearson ( http://www.upland.co.uk )
*
*/
body{
-webkit-touch-callout: none!important;
}
.parent-zoom{
-webkit-user-select: none!important;
}
.parent-zoom img{
-webkit-transition-property: opacity;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
cursor: cell;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
border: 0;
}
.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 5px 10px #000;
-moz-box-shadow: 0px 5px 10px #000;
-o-box-shadow: 0px 5px 10px #000;
-ms-box-shadow: 0px 5px 10px #000;
box-shadow: 0px 5px 10px #000;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#3333333', Positive='true');
line-height: 100px;
text-align: center;
background-color: #fff;
z-index: 999;
overflow: hidden;
cursor: url(./img/blank.cur), move;
-webkit-transition-property: border-width, border-color, opacity;
-webkit-transition-duration: 500ms, 1s, 500ms;
-webkit-transition-timing-function: ease;
}
.zoomy span{
display: block;
margin: 5px auto;
background: -moz-linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,0))); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff);
}
.zoomy a{
color: #333;
text-decoration: none;
outline: 0;
}
.inactive img{
opacity: 0.85!important;
filter:alpha(opacity=85)!important;
}
.zoomy #tmp{
max-width: none;
max-height: none;
top: -999999px;
left: -999999px;
}
.zoomy.start{
border-width: 2px;
border-color: #444;
}
.zoomy-wrap{
position: relative;
margin: 0;
padding: 0;
z-index: 999;
}
.zoomy-btn{
font-family: sans-serif;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
border-radius: 50%;
height: 60px;
width : 60px;
overflow: hidden;
-webkit-box-shadow: 0px 1px 2px rgba(255,255,255,.8);
box-shadow: 0px 1px 2px rgba(255,255,255,.8);
background: rgba(0,0,0,.8);
background-position: 0px 0px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
line-height: 100px;
color: #fff;
}
.zoomy-btn svg{
margin: 8px auto;
display: block;
}
.active .zoomy-btn svg{
display: none;
}
.active .zoomy-btn{
width: 100%;
height: 100%;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
top: 0px;
right: 0px;
overflow: hidden;
color: rgba(0,0,0,0);
}
I wanted to put it like that, but it does not come out, it just does not leave the BIG image and if I change the href it does not come out either
<li>
<a href="#">
<?php echo '<img class="min" src="'.$imag2.'" >'; ?></a>
<?php echo '<a href="'.$imag2.'" class="max zoom"><img src="'.$imag2.'" width="200" heigth="50"></a>'; ?>
</li>
How can I mix it so that this gallery comes out