Retrieve data-descr attribute using jquery to use in Fancybox thumbnail -

- 

<div class="shirt-thumb">     <a href="../wp-content/uploads/2014/05/icelandic-logo2.png" class="fancybox fancybox-thumb" rel="shirt1" title="shirt">         <img src="../wp-content/uploads/2014/05/icelandic-logo2.png" data-descr="shirt 1 back" />     </a> </div>

above html. trying grab data-descr attribute , add fancybox thumbnail in jquery can apply css style ::after element. need descriptions appear below each thumbnail. i'm understanding, there isn't built in way this, apply title underneath fullsize image?

this how variables thumbnail list items defined. 1 added thumbdescr, other 3 came fancybox:

init: function (opts, obj) {     var = this,         list,         thumbdescr = opts.description,         thumbwidth = opts.width,         thumbheight = opts.height,         thumbsource = opts.source;

below build of thumbnail list item. part loads fine: 

for (var n = 0; n < obj.group.length; n++) {     list += '<li><a style="width:' + thumbwidth + 'px;height:' + thumbheight + 'px;" data-descr="' + thumbdescr + '" href="javascript:$.fancybox.jumpto(' + n + ');"></a></li>'; }

and these things have done try retrieve description:

this applied function text data-descr instead of retrieving -

description: function (item) { //function obtain description of thumbnail image     var descr;      if (item.element) {         descr = $(item.element).find('img').attr('data-descr');     }      if (!descr && item.type === 'image' && item.href) {         descr = item.href;     }      return descr; }

same thing - 

description: function (item) { // function obtain description of thumbnail image     var descr;      if (item.element) {         descr = $(item.element).find('img').data("descr"),     }      return descr; }

and returned "undefined" -

description : f.find('img').data("descr")

...where f defined class .fancybox earlier in jquery.

yep, i'm pretty new @ this, i'm sure there easy fix i'm not sure how find need. please let me know if didn't include enough info.

if "pretty new @ this", wouldn't advise mess original fancybox js files. achieve pretty want within own fancybox custom initialization using fancybox callbacks.

first, bear in mind fancybox thumbnails helpers appended after (fancybox) image shown on screen, in order append description/title (retrieved data-descr attribute of <img> tag) may need use aftershow callback.

also, since there little delay in process, better use settimeout() function make sure thumbnails have been appended dom.

so try code :

var _descrflag = false; $(".fancybox").fancybox({     helpers: {         thumbs: {             width: 80, // thumbnails size             height: 80         }     },     aftershow: function (current) {         // validate if added captions         if (!_descrflag) {             // wait bit             settimeout(function () {                 // each data-descr                 $(".fancybox").each(function (i) {                     // wrap data-descr in html element                     var _datadescr = "<p>" + $(this).find("img").data("descr") + "</p>";                     // append current thumb using .eq()                     $("#fancybox-thumbs").find("li").css({                         backgroundcolor: "#fff" // default transparent                     }).eq(i).append(_datadescr);                 }); // each                 // done? set flag true                 _descrflag = true;             }, 100); // adjust time needed         }; // if     } }); // fancybox

notes :

  • we used _descrflag variable flag (and validate first in callback) make sure descriptions added once.
  • notice need append html element (var _datadescr); in example used <p> can use html element need.

  • if source not set, fancybox create thumbnails (big) image shown on box. can reduce overhead , page load specifying source of thumbnail, can same <img> tag instance, :

    helpers: {     thumbs: {         width: 80,         height: 80,         source: function (current) {             return current.element.find("img").attr("src");         }     } }

see jsfiddle

... , no need mess original js files ;)


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more