Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Question Concerning Pictures

Question Concerning Pictures 3 Jahre 11 Monate her #54535

  • HIV7
  • HIV7s Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 58
  • Karma: 0
Hello experts,

I got a question concerning the use of pictures in the questions.

In my survey pictures are the questions, because I show Management Charts and want the users to put them in a certain order from the one the like best to the worst one in their opinion.

So I made a Question using the answer Type "Rank" and filled in the Pictures.

I added a screenshot of the first question below.


The Problem now is that the five pictures are shown too small, so that the design issues (the target of my survey) are not clearly shown.

So my question is, how this can be done better?

Is there any possibility of maybe using a mouseover function that gives the pictures a larger size during mouseover, so that the user can watch the pictures one by one and compare?

I even looked trough the documentation but unfortunately I haven't found something yet.

So can anyone please give me some advice.

That would be great,
HIV7
LimeSurveyScreenshot.jpg
Letzte Änderung: 3 Jahre 11 Monate her von HIV7. Begründung: Troubles with picture
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54536

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4372
  • Dank erhalten: 830
  • Karma: 381
You should be able to use a tooltip to show the larger image on mouseover. Have a look at bassistance.de/jquery-plugins/jquery-plugin-tooltip/.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54541

  • HIV7
  • HIV7s Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 58
  • Karma: 0
Hi Tony,

thanks a lot for the advice. Unfortunately it seems, that I'm not able to bring it to work.

I tried very hard for several times now, but there was no effect. I even looked through the forum posts and the internet. There some people seem to have already had the same problem, but there's not a single piece of documentation how to implement and put to work the jquery tooltip with lime survey.

So I kindly want to ask if you or someone else can pls. post some pieces of how to implement it...

That would be sooo great.

THX in advance,
HIV7
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54547

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4372
  • Dank erhalten: 830
  • Karma: 381
Let me play with it over the weekend and see if I can't put together some tips.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54594

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4372
  • Dank erhalten: 830
  • Karma: 381
HIV7, on reflection, I think that a lightbox like this may suit your needs better - leandrovieira.com/projects/jquery/lightbox/.

What do you think?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: c_schmitz

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54595

  • HIV7
  • HIV7s Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 58
  • Karma: 0
Hi,

thanks a lot for the idea. Anyway, I think that the tooltip might the better way, because then the order of the pictures is not straight. The user can even decide which picture he wants to see again and that makes a comparison much easier.

The real matter for me is the installation and to get thinks to work.

Did you manage to get the tooltip working togehter with limesurvey? Or are they not compatible?

I mean, I thinnk I installed it correctly, but I don't know what code to place where in limesurvey to put them together....

My folder is: /public_html/umfrage/scripts/jquery


Thanks a lot for your answer in advance,
hiv7
Letzte Änderung: 3 Jahre 11 Monate her von HIV7. Begründung: added additional Information
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 11 Monate her #54597

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4372
  • Dank erhalten: 830
  • Karma: 381
Okay, here are the steps to use the above plugin. It should be noted that there is a tooltip plugin shipped with LimeSurvey (craigsworks.com/projects/qtip/) and the use of it would be similar but with different paths to the JavaScript files.

1) Upload your small and large images to the server in the upload/surveys/yourSurveyID/ folder.

2) Insert your small images into the question and give each a unique ID.

3) Download the plugin from bassistance.de/jquery-plugins/jquery-plugin-tooltip/.

4) Place the following files in your template folder:
- jquery.tooltip.css
- jquery.tooltip.js

5) Place the following code at the beginning of startpage.pstpl this will include the plugin files in the survey).
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}/jquery.tooltip.css" />
<script type="text/javascript" src="{TEMPLATEURL}jquery.tooltip.js"></script>

6) Set up your survey to use JavaScript and place the following script in the source of the question. Replace "11111" with your survey ID and repeat the tooltip application for all of your images.
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
		// Apply tooltip to images
		$('#image1_small').tooltip({ 
			delay: 0, 
			showURL: false, 
			bodyHandler: function() { 
				return $("<img/>").attr("src", 'upload/surveys/11111/image1_large.jpg'); 
			} 
		});
 
		$('#image2_small').tooltip({ 
			delay: 0, 
			showURL: false, 
			bodyHandler: function() { 
				return $("<img/>").attr("src", 'upload/surveys/11111/image2_large.jpg'); 
			} 
		});
	});
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Letzte Änderung: 3 Jahre 11 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 10 Monate her #54609

  • HIV7
  • HIV7s Avatar
  • OFFLINE
  • Senior Lime
  • Beiträge: 58
  • Karma: 0
Hello Tony,

great thanks to you. As I said at the beginning of this post, I'm not an expert concerning this web issues. So please let me ask a few questions left, for me to be sure I got the right thing, and for others who have the same problem to have a solution posted in here.

1) I really did not know that I have to have 2 versions of "my" pictures. One large and even a small one. I thought I can input a fixed size f. ex. 600 x 450 (like it is in limesurvey), that is shown from the tooltip. Is the usage of two picture versions valid for all tool tip applications??

In my case, it means also for (craigsworks.com/projects/qtip/ -> the one shipped with lime survey)?

2) What tool would you recommend me for my issue? Thinking of features like the use of the pictures (comp. to 1) or fixed positioning,...

3) Can you pls. specify the differences between installing the jqery tool tip and the craigworks one? You've already mentioned the path's/folders.

That would be very great.

Thanks a lot in advance,
Hiv7
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re:Question Concerning Pictures 3 Jahre 10 Monate her #54618

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4372
  • Dank erhalten: 830
  • Karma: 381
1) You can use the same image for both the question and the tooltip but, in my opinion, this is sub-optimal because you would need to reduce the size for display in the question with HTML attributes. This does not give as good results as resizing/resampling the image properly with Fireworks, Photoshop or other software.

To do this you would need to add height and width attributes to the image tags in your question:
<img src="upload/surveys/11111/image1.jpg" width="200" height="150" id="smallImage" src="upload/surveys/11111/image1.jpg" />
and then use something like this JavaScript:
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        // Apply tooltip to images
        $('#smallImage').tooltip({ 
            delay: 0, 
            showURL: false, 
            bodyHandler: function() { 
                return $("<img/>").attr("src", this.src); 
            } 
        });
    });
 
</script>

2) I'm afraid I don't have time to test the performance or positioning capabilities of the different tooltip plugins. You will have to experiment and come to your own decision. I still believe that a lightbox plugin may suit your nees better (you can disable the next/previous and slideshow functionality).

3) The qTip plugin is already installed, all you need to do is reference it in startpage.pstpl:
<script src="scripts/jquery/jquery.qtip.js" type="text/javascript"></script>
and then use JavaScript like this (this is not tested but details are at the qTip site):
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        // Apply tooltip to images
	$('#image1').qtip({
	    content: '<img src="upload/surveys/11111/image1.jpg" />'
	});
 
	$('#image2').qtip({
	    content: '<img src="upload/surveys/11111/image2.jpg" />'
	});
 
    });
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Letzte Änderung: 3 Jahre 10 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: HIV7
Moderatoren: ITEd
Ladezeit der Seite: 0.265 Sekunden
Donation Image