Mi problema es que, aunque estoy usando diferentes enlaces CDN para mis imágenes, ambos aparecen como el primer enlace. La primera imagen aparece y funciona bien con el proceso de desvanecimiento. La segunda imagen solo muestra una copia de la primera imagen, aunque los enlaces son completamente diferentes. ¿Es esto un problema con mi código o el jQuery que estoy usando? ¿Hay un trabajo alrededor? Totalmente perdido.

Este es el código en mi página HTML:

 <div class="guidecontainer"> <div> <div class="element guidecontainer" data-crossfade-start="[redacted, valid CDN link for privacy reasons. this is the starting photo.]" data-crossfade-end="[redacted, valid CDN link for privacy reasons. this is the blur.]"> </div> </div> <div> <p class="guidetitle">Example Header</p> </div> </div> <div class="guidecontainer" style="height: 25%;"></div> <div class="guidecontainer"> <div> <div class="element guidecontainer" data-crossfade-start="[redacted, valid CDN link for privacy reasons. this is the starting photo. this photo follows the one in the first div above.]" data-crossfade-end="[redacted, valid CDN link for privacy reasons. this is the blur, but it also follows the first images blur.]"> </div> </div> <div> <p class="guidetitle">Example Header</p> </div> </div> </div> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdn.rawgit.com/mikefowler/crossfade.js/master/dist/crossfade.jquery.js"></script> <script type="text/javascript"> $(function () { $('.element').crossfade(); }); </script>

mi CSS:

 .guidecontainer { width: 100%; height: 100%; position: relative; overflow-x: hidden; } .guidetitle { font-size: 400%; font-family: inherit; color: white; top:0; position:absolute; text-align: left; padding:1em; }

"Elemento" proviene de jQuery.