The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

looking for code to make image zom with frame

View previous topic View next topic Go down

Solved looking for code to make image zom with frame

Post by Michael_vx on October 9th 2014, 8:01 am

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
Smile

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 9th 2014, 3:38 pm


Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 10th 2014, 12:57 pm

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
Very Happy
and thanks for understanding what i was looking for it
i like your way of reading my mind Very Happy

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 10th 2014, 4:22 pm

That's fine there's no rush. Wink

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 11th 2014, 9:30 am

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

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

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 12th 2014, 9:07 am

Shocked
is the frame part hard
Very Happy
or topic lost in wonderland hahah
im just kidding
just for bump
Smile

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 12th 2014, 5:08 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 13th 2014, 12:04 am

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

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 13th 2014, 12:18 am

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. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 13th 2014, 12:28 am

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

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 13th 2014, 12:48 am

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. Wink

The third line :
Adds a drop shadow to the image.
Code:
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Michael_vx on October 13th 2014, 12:58 am

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

Michael_vx
Forumember

Male Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

Solved Re: looking for code to make image zom with frame

Post by Ange Tuteur on October 13th 2014, 1:21 am

You're welcome ^^

Topic archived

Have a great day ! Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum