looking for code to make image zom with frame

looking for code to make image zom with frame instead of click here to inlarge image something like this but with a frame

Code:

      .postbody img{-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla duration version*/ }    .postbody img:hover{-moz-transform:scale(1.1); /*Mozilla scale version*/-moz-box-shadow:0px 0px 0px gray; /*Mozilla shadow version*/opacity: 1;}

edit
the needed Script with click not hover on the images

Hello Michael,

Something like this ?
https://help.forumotion.com/t115826-add-a-lightbox-effect-to-the-images-of-the-forum

Ange Tuteur wrote:Hello Michael,

Something like this ?
https://help.forumotion.com/t115826-add-a-lightbox-effect-to-the-images-of-the-forum

1st sorry for delay internet is super bad
2nd yes it is all what i like to add is a frame around the image when zoom
if possible

and thanks for understanding what i was looking for it
i like your way of reading my mind

That's fine there's no rush.

So, you don't want it exactly like that ? You just want the image to zoom when you click on it ?

Ange Tuteur wrote:That's fine there's no rush.

So, you don't want it exactly like that ? You just want the image to zoom when you click on it ?

yes when i click on and i like to know if it possible to have a freame a round the image when zoom if possible

 
is the frame part hard

or topic lost in wonderland hahah
im just kidding
just for bump

See if this is what you want :

Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the topics
Paste the code below and submit :

Code:

$(function() {
  var img = $('.post .postbody div img');
  for (i=0; i<img.length; i++) {
    img[i].className += ' c_0';
    img[i].onclick = function() {
      if (/c_0/.test(this.className)) this.className = this.className.replace(/c_0/,'c_1');
      else if (/c_1/.test(this.className)) this.className = this.className.replace(/c_1/,'c_0');
    }
  }
});

Next go to Display > Colors > CSS stylesheet and add the code below :

Code:

.c_0, .c_1 { transition:500ms }
.c_1 {
  transform:scale(1.5);
  border:4px solid #AAA;
  box-shadow:3px 3px 3px rgba(0,0,0, 0.5);
}

The class .c_0 is the default class (Not clicked), It is changed to .c_1 on click.

wow super cool thanks so much ange
if you dont mind tell me how to edit the frame and the zoom and mark topic as solved
this what i want in topics
topic solved super thanks

You're welcome ^^

You can modify this rule to change the style of the clicked image :

Code:

.c_1 {
  transform:scale(1.5);
  border:4px solid #AAA;
  box-shadow:3px 3px 3px rgba(0,0,0, 0.5);
}

this rule determines the speed of the transition :

Code:

.c_0, .c_1 { transition:500ms }

That's all you need to change.

i forget to ask 1 thing can i use something like

and thanks again
i like to make sure if i understand good
scale is how the image zoom right ?
and the next line is the frame
but what the 3rd line
thanks again i think all is done for this

You can set it as a background, but I'm not sure how well it would appear. Here's the CSS of that though :

Code:

.c_1 {
  transform:scale(1.5);
  background:url('http://i39.servimg.com/u/f39/11/74/20/44/4010.jpg') no-repeat center / 100% 100%;
  padding:3%; /* space around image */
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}

Yep, scale adjusts how the image zooms.

The third line :
Adds a drop shadow to the image.

Code:

box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);

worked after i added this

Code:

.c_0, .c_1 { transition:500ms }
.c_1 {

before

Code:

  transform:scale(1.5);
  background:url('http://i39.servimg.com/u/f39/11/74/20/44/4010.jpg') no-repeat center / 100% 100%;
  padding:3%; /* space around image */
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}

solved thanks a lot

You're welcome ^^

Topic archived

Have a great day !