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.

Widget

View previous topic View next topic Go down

Solved Widget

Post by TheShaka on April 3rd 2014, 3:49 pm

Hi i have no idea for the title because i don't know name of the thing What the fuck ?!?
I talk about this widget:

When you put your mouse on the image (example YUKI) above you appears full photo
you can see the widget in this forum: http://seishin-rp.forumotion.com/


I want make something like this:


Last edited by TheShaka on April 4th 2014, 7:06 pm; edited 1 time in total

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Ange Tuteur on April 3rd 2014, 5:13 pm

Hello TheShaka,

You could do something like this :
Administration panel > modules > forum widgets management > add a new widget

Widget name : what you wish
Use a table type : Yes
Widget title : what you wish
Paste the code below and save :
Code:
<!-- script --><script>
jQuery(document).ready(function() {
  var defaultImage = 'http://i56.servimg.com/u/f56/18/21/60/73/defaul10.png';
  jQuery('#staffImage img').hover(function() { jQuery('#resImage img').attr('src',jQuery(this).attr('alt')) },
  function() { jQuery('#resImage img').attr('src',defaultImage) });
});
</script>
<!-- stylsheet --><style>
#resImage {
  border-bottom:1px solid #000;
  margin-bottom:6px;
}
#staffImage img { margin:2px; }
</style>
<!-- staff list -->
<div id="resImage">
 <img src="http://i56.servimg.com/u/f56/18/21/60/73/defaul10.png" />
</div>
<div id="staffImage">
 <img src="http://i56.servimg.com/u/f56/18/21/60/73/111.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/blue10.png" /><img src="http://i56.servimg.com/u/f56/18/21/60/73/210.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/orange10.png" /><img src="http://i56.servimg.com/u/f56/18/21/60/73/310.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/green10.png" /><img src="http://i56.servimg.com/u/f56/18/21/60/73/410.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/purple10.png" /><img src="http://i56.servimg.com/u/f56/18/21/60/73/510.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/red10.png" />
</div>

Modifications :

For the default image you must change two things; the html and script :

Image shown by default is :
Code:
<div id="resImage">
 <img src="http://i56.servimg.com/u/f56/18/21/60/73/defaul10.png" />
</div>

and in the script you must modify the value of this variable to the URL of your default image :
Code:
var defaultImage = 'http://i56.servimg.com/u/f56/18/21/60/73/defaul10.png';

Lastly is the images :
Code:
<img src="http://i56.servimg.com/u/f56/18/21/60/73/111.png" alt="http://i56.servimg.com/u/f56/18/21/60/73/blue10.png" />

Above there are two URLs, one that is shown as an image and the other as text if the image cannot be displayed. We use the alt to display the image where our default image is on hover. So to make it simple :
Code:
<img src="URL of preview" alt="URL of image shown on hover" />

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 3rd 2014, 5:35 pm

Hi i try this in my test forum: http://seiya.forumpl.net/portal
All images are so big O_o

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Pizza Boi on April 3rd 2014, 7:18 pm

Hi Very Happy

You can add width="" and height="" in the img src code. It can be px value too.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 3rd 2014, 7:37 pm

@Pizza Boi wrote:Hi Very Happy

You can add width="" and height="" in the img src code. It can be px value too.

Regards,
Pizza Boi
I try that before i post this thread but not work.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Pizza Boi on April 3rd 2014, 7:42 pm

Hi Very Happy

Try declaring an id or a class for the picture (The declaration can be the same IF the pictures have the same size, else, the dimensions won't really work with each other - remember that ID's start with # and class starts with . ! )

Then once you declare, add this in your CSS:

Code:
declared name {
  max-width: #px;
  max-height: #px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 3rd 2014, 7:59 pm

Hi i think the problem is here: http://help.forumotion.com/t131576-auto-resize-of-quick-reply-genereal-message-and-video?highlight=auto+image+resize
I use auto image resize, any idea what i need to do Shocked

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Pizza Boi on April 3rd 2014, 8:03 pm

Hi Very Happy

I did not see that there was a name already declared... lol, phone view sucks x.x...

Anyway, try adding this in your CSS, hopefully it works:

Code:
#staffImage {
max-width: 200px;
max-height: 200px;
}

You can change 200 to any value you desire.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 3rd 2014, 8:07 pm

Pizza if i will use this
Code:
#staffImage {
max-width: 200px;
max-height: 200px;
}

i will lose auto resize Confused
With out table it work good but no auto resize...
With table the image resize to 100%...
lol

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Pizza Boi on April 3rd 2014, 8:14 pm

Hi Very Happy

Well, after re-reading Ange's code again, the only thing that has not been declared is a class. Try these 2 methods:

#1 Method - Declare a class after id="resImage" (You may declare something like class="resImage") as it should denote a difference between ID and class.

And then add the code (The one I previously gave) to the CSS and save.

#2 If that doesn't work, this is the second method - Declare an individual class for each img and then sum everything up into one code in the CSS (Note: You can also declare the same class for each image since they'd just re-size the same).

If those don't work, it's up to Ange now ._. . Sorry in advance x.x . *By the way, I based my post on what I can interpret on what you just said above as I have a bit of a difficult time comprehending what you say sometimes x.x, sorry x.x*

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 3rd 2014, 9:20 pm

Its hard to understand what you say i am confused,,,
but i explain
here is my widget:


Image in red frame must auto resize because every one have another size of ecran.
Image 1,2,3,4,5 no need resize because they are small.
Actualy i use this code:
Code:
.module img { height:100% !important; width:100% !important; }
Before i had same ptoblem with profile icons: http://help.forumotion.com/t131645-profile-images-problem?highlight=profile+icon
Lastest topic image: http://help.forumotion.com/t131473-recent-topic-widget?highlight=profile+widget

If i am not use table type it work but the image in frame not resize.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Ange Tuteur on April 4th 2014, 6:13 pm

Pizza boi,

Id's can be used the same way as class names however, the attribute is used for unique elements. (I usually add an id to an element if I'm using it in a script) There would be no need to go through each image and add a class when you can write '#id img' and select all the image elements within that unique element.

TheShaka,

You are wanting to fix the little images size, yes ?

You can try adding this to your CSS, or add it in between the style tags in the widget :
Code:
#staffImage img { width:auto !important; }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 4th 2014, 6:38 pm

Work ^^ 1 question more how i can remove the reset img, i mean when i put mouse on img and later i take off the cursor image change to the first.
and its possible to make off the hover effect in this widget?

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Ange Tuteur on April 4th 2014, 6:42 pm

Replace the script in the widget by :
Code:
<!-- script --><script>
jQuery(document).ready(function() {
  jQuery('#staffImage img').mouseover(function() {
  jQuery('#resImage img').attr('src',jQuery(this).attr('alt'))
  });
});
</script>

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Widget

Post by TheShaka on April 4th 2014, 7:05 pm

Work perfect thanks.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Solved Re: Widget

Post by Ange Tuteur on April 4th 2014, 7:20 pm

You're welcome :rose:

Topic solved and archived

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