7553

Create an array of objects from img element attributes, and output values, jquery

Question:

Right now I have a fullscreen plug-in working with static urls, but I'd like to replace those with dynamic image data that a CMS outputs to the page.

Here is a sample of the HTML output from the CMS:

<ul class="large-gallery"> <li> <a href="http://www.domain.com/urlpath34"> <img src="http://www.domain/imageurl351.jpg" data-full-src="http://www.domain/imageurl361.jpg" alt="Image Title 4725"> </a> </li> <li> <a href="http://www.domain.com/urlpath34"> <img src="http://www.domain/imageurl354.jpg" data-full-src="http://www.domain/imageurl3721.jpg" alt="Image Title 73365"> </a> </li> <li> <a href="http://www.domain.com/urlpath34"> <img src="http://www.domain/imageurl356.jpg" data-full-src=v"http://www.domain/imageurl3567.jpg" alt="Image Title 4635"> </a> </li> </ul>

Here is the Javascript:

<script type="text/javascript">// <![CDATA[ jQuery(function($){ $.supersized({ // Functionality slide_interval : 5000, // Length between transitions new_window : 0, transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 1200, // Speed of transition // Components slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') slides : [ // Slideshow Images {image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'}, ] }); }); // ]]></script>

What I'd like to do.

I'd like to replace this code in the javascript;

{image : 'http://www.domain.com/manually-inputed-image-path-url-1.jpg', title : 'Some Manual Title 1', url : 'http://www.domain.com/manually-inputted-url-1'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-2.jpg', title : 'Some Manual Title 2', url : 'http://www.domain.com/manually-inputted-url-2'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-3.jpg', title : 'Some Manual Title 3', url : 'http://www.domain.com/manually-inputted-url-3'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-4.jpg', title : 'Some Manual Title 4', url : 'http://www.domain.com/manually-inputted-url-4'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-5.jpg', title : 'Some Manual Title 5', url : 'http://www.domain.com/manually-inputted-url-5'}, {image : 'http://www.domain.com/manually-inputed-image-path-url-6.jpg', title : 'Some Manual Title 6', url : 'http://www.domain.com/manually-inputted-url-6'},

to be something like this:

for each bigImage, output this { image : 'bigImage.imgUrl', title : ' bigImage.title ', url : ' bigImage.linkUrl '},

I was thinking about creating an array of objects for bigImages, and then call each object as bigImage. but im not really sure the best approach, and also I'm curious how to format it to have it work within the plug-in script.

Answer1:

What you need is a function that takes a collection of img elements as input and returns the desired array as output.

I might write something like this:

var slidesArray = function() { var array = []; $("ul.large-gallery li img").each(function() { var arrayItem = { image: $(this).attr('src'), title: $(this).attr('alt'), url: $(this).parent('a').attr('href') }; array.push(arrayItem); }); return array; }

And then you can say in your configuration hash:

slides: slidesArray()

Answer2:

var slds = []; $('.large-gallery a').each(function(i,obj){ var $this = $(obj), $thisImg = $this.find('img'); slds.push({ image: $thisImg .data('full-src'), title: $thisImg .prop('title'), url: $this.prop('href') }) });

Then simply supply slds as the source to slides

slides: slds

Recommend

  • AS3 String Memory Leak
  • JavaScript In KML Ignored By Google Earth Plugin
  • Tag and Element shortcuts - Sublime Text 2
  • how to display   in Mozilla using XSL.
  • How to make jdk.nashorn.api.scripting.JSObject visible in plugin [duplicate]
  • How does document.ready work with angular element directives?
  • Zurb Foundation _global.scss meta styles for js?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • jQuery ready not fired after rails link_to is clicked
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Python urlparse: small issue
  • FileReader+canvas image loading problem
  • MongoDB in PHP using aggregate to group by _id is null not working
  • DomPDF {PAGE_NUM} not on first page
  • Email format validation in mvc3 view
  • Display issues when we change from one jquery mobile page to another in firefox
  • Javascript simulate pressing enter in input box
  • HTML download movie download link
  • Updating server-side rendering client-side
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • To display the title for the current loaction in map in iphone
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • How to disable jQuery.jplayer autoplay?
  • A cron job substitute?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • python draw pie shapes with colour filled
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?