As a newcomer, I ask for your understanding if I lack knowledge in some areas.
I have been working on a project and using the cycle2 plugin successfully to create a slideshow on my index page with images pulled from the internet.
Now, I am trying to implement a slideshow on the show page where each product's image is pulled from the database. While I have managed to make it work, I am facing an issue where the first image in the slideshow is always blank and keeps trying to load until it switches to the product image from the database.
I believe the problem lies in the src attribute of the img tag, as the image is being retrieved but a blank slide is also displayed. Any assistance on this matter would be highly valued!
Here is the code I have so far:
<div id="slideshow">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
style="z-index:-1;"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<!-- empty element for overlay -->
<img src = <%= link_to image_tag @product.image_url %>>
<!-- prev/next links -->
<div id=outside>
<span id=prev><a href="#" class="button1">?</a></span>
<span id=next><a href="#" class="button1">? </a></span>
</div>
</div>
Your help is greatly appreciated, Ben