Solved

Javascript in php for select option to image

Posted on 2014-02-18
5
1,263 Views
Last Modified: 2014-03-03
Hi,

I have a dropdown , each value has a product image related to it.

So now i dont want the dropdown , and i want to show images corresponding to it.

So 3 dropdown values before, now i need 3 images display in a row instead of dropdown but use the same function as dropdown.

http://jsfiddle.net/32Tw4/

Thanks
0
Comment
Question by:magento
  • 3
  • 2
5 Comments
 
LVL 7

Expert Comment

by:cstsang
Comment Utility
You need to download the js lib. from the following web site:
http://www.marghoobsuleman.com/jquery-image-dropdown

There are a small tutorial show you how to use the js lib. in your script.

Good Luck
0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi ,

Thanks for your advice, looks like it allows the image in the dropdown itself.

But is it possible to remove the dropdown and only shows images instead of it?

Thanks
0
 
LVL 7

Expert Comment

by:cstsang
Comment Utility
0
 
LVL 7

Accepted Solution

by:
cstsang earned 500 total points
Comment Utility
Is it what you need?
<html>
    <head>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
         <script language=javascript>
                //Dropdown plugin data
                var ddData = [
                    {
                        text: "Facebook",
                        value: 1,
                        selected: false,
                        description: "Description with Facebook",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                    },
                    {
                        text: "Twitter",
                        value: 2,
                        selected: false,
                        description: "Description with Twitter",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                    },
                    {
                        text: "LinkedIn",
                        value: 3,
                        selected: false,
                        description: "Description with LinkedIn",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                    },
                    {
                        text: "Foursquare",
                        value: 4,
                        selected: false,
                        description: "Description with Foursquare",
                        imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                    }
                ];            
                function start()
                {
                  $('#myDropdown').ddslick({
    data:ddData,
    width:400,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(returnDataObject){
        //callback function: do something with selectedData;
        alert(returnDataObject.selectedData.value);
    }   
});
                  
                }
         </script>
     </head>
     <body onload="start()">   
      <div id="myDropdown"></div>
     </body>
</html>  

Open in new window

0
 
LVL 5

Author Closing Comment

by:magento
Comment Utility
Thank you ,
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now