All geek questions in one place

Adding HTML elements via jQuery causing an error in the Etalage plugin (error of the Collision function)

TL; DR: An error that I cannot find prevents the plugin from working when HTML elements are injected through jQuery.

Summary: The plugin is designed if you have control over the HTML, but since I am not trying to coronate the image tag to get the "hoverzoom" attributes for the mouse, but when I add the necessary HTML attributes through jQuery functions such as .wrap(); .after(); and .addClass(); , all images disappear. I have to do this with jQuery DOM manipulation because I have no control over the HTML directly. (Don’t ask, a long story should be jQuery). It is strange that in the same sample environment (see below), if I add HTML elements, IDs and classes, the plugin works. But if I try to add all the necessary attributes to a tag with an open tag, it will disappear.

Theory: Image tags seem to disappear as soon as <ul> has id="etalage" (as dictated by the plugin’s deployment guidelines), and when the <img> tags have corresponding classes, designating them as source and thumb images. In my theory, there is a CSS rule “display: none”, but if this is true, then should not another example work that works on the page?

Plugin: Etalage on Canyon (I would post a link, but Stack tells me that I'm too young to post more than one link)

Example error page: in the wild (comments can be seen at the inspector)

My code (which doesn't work) HTML:

 <img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />

JQuery

 $(document).ready(function(){ $('#thumbImage').wrap('<ul id="etalage"><li /></ul>') .addClass('etalage_thumb_image') .after('<img class="etalage_source_image target" />'); $('.etalage_source_image') .attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg'); });

According to Etalage, this is code that works.

HTML

 <ul id="etalage"> <li> <img class="etalage_thumb_image" src="xyz.jpg"> <img class="etalage_source_image target" src="xyz.jpg"> </li> </ul>

I am so lost. I appreciate in advance if anyone can help. I posted to their help forum, but SO was so helpful in debugging my code in the past.

+4
source share
1 answer

There are two problems.

  • you use ids to apply the plugin in the hoverZoomjquery.etalage.min.js script. This means that you enter the second DOM element with the same identifier. Identifiers must be unique. I fixed this by making the identifiers unique by adding the "etalage" class and using $ (".alalage") instead of $ ("# etalage").

  • you use document.ready to manipulate the DOM and also use the plugin, except that they are different files. There is no guarantee that the first handler will fire. The plugin can be applied before you actually enter DOM objects. I moved the call to apply the plugin to the handler where the DOM is manipulated, so I can make sure that it is called after I insert the elements.

I apologize for the “hacker” fix, but this should illustrate the problem. This makes the code work.

 <!DOCTYPE html> <html> <head> <title>iG Hoverzoom v1</title> <link rel="stylesheet" type="text/css" href="http://igavelauctions.com/wp-content/themes/twentyeleven/css/hoverZoomEtalage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://igavelauctions.com/wp-content/themes/twentyeleven/js/hoverZoomjquery.etalage.min.js"></script> <!--<script type="text/javascript" src="hoverZoomThumbWidths.js"></script>--> <script type="text/javascript"> $(document).ready(function () { $('#thumbImage').wrap('<ul id="etalage2" class="etalage"><li></li></ul>').addClass('etalage_thumb_image').after('<img class="etalage_source_image target"/>'); $('.etalage_source_image').attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg'); $('.etalage').etalage({ thumb_image_width: 300, thumb_image_height: 400, source_image_width: 900, source_image_height: 1200 }); }); </script> </head> <body> <div> <!-- Example of code that works --> <ul id="etalage1" class="etalage"> <li> <img class="etalage_thumb_image" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"> <img class="etalage_source_image target" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"> </li> </ul> </div> <div> <!-- This is image tag that I'm trying to turn into Etalage through jQuery operators It disappears when the page is rendered. --> <img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" /> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1493314/

More articles:


All Articles